iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない

Question

<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>

• jsfiddle

上記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、
クリックイベントに登録したハンドラが動作しません。

addEventListenerの第三引数をtrueにして試してもみたのですが結果は同じでした。

実際のiframe内に読み込むページはTwitterの埋め込みウィジェットになるので、

1. iframe内のwindowに対してclickイベントを設定することができず、
2. iframe内のDOM要素のクリックイベントが出来なくなるような実装では解決しません。

このような条件でイベントハンドラを動作させる方法や、イベントハンドラが動作しない理由についてお心当たりがございましたら是非ご教授いただきたいです。よろしくお願いします。

Answer 1

Twitter側にそういうAPIが用意されているのでなければ、ブラウザ内ではどうしようもありません。

イベントバブリングは同じドキュメント内だけで起きるので、<iframe>で別に形成されたドキュメントの内側から外側にイベントは伝わりません（StackOverflow）。

Answer 2

@maisumakun 様のご指摘通り、表題の質問の解決方法は現状存在しないようでした。

不本意ではありますが、 iframe 内のイベントターゲットを邪魔しないように、 position: absolute; を指定したアクション用の要素を iframe に被せて実装を行いました。

@maisumakun 様ご回答ありがとうございました。