下記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、クリックイベントに登録したハンドラが動作しません。
addEventListener
の第三引数をtrue
にして試してもみたのですが結果は同じでした。
実際のiframe
内に読み込むページはTwitterの埋め込みウィジェットになるので、
iframe
内のwindow
に対してclick
イベントを設定することができず、iframe
内のDOM要素のクリックイベントが出来なくなるような実装では解決しません。
このような条件でイベントハンドラを動作させる方法や、イベントハンドラが動作しない理由についてお心当たりがございましたら是非ご教授いただきたいです。よろしくお願いします。
サンプルコード: - JSFiddle
<div id="container">
<iframe src="https://www.example.com"></iframe>
</div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
const container = document.querySelector("#container");
const clickHandler = (event) => {
alert("clicked");
}
container.addEventListener("click", clickHandler, true);
</script>