IFrame中不会发生事件冒泡[重复]答案

【问题标题】：Event bubbling not happen in IFrame [duplicate]IFrame中不会发生事件冒泡[重复]
【发布时间】：2016-10-18 13:27:42
【问题描述】：

我认为这是一个无辜的问题，但我真的还不知道答案。

我们都知道事件冒泡将事件定向到其预期目标，它的工作原理是这样的：单击按钮并将事件定向到按钮。如果为该对象设置了事件处理程序，则触发该事件。如果没有为该对象设置事件处理程序，则事件会冒泡（如水中的气泡）到对象父级。

HTML部分

<div>
  <iframe>
    <a>Clickable fdf Area</a>
  </iframe>
</div>

javascript部分

    $('div iframe').load(function(){
    var iframeBody = $(this).contents().find("body");
  iframeBody.html("<a href='www.google.com'>clickable area</a>");
  iframeBody.on("click", "a", function(){
    alert(22222);
  });
 document.getElementsByTagName("div")[0].addEventListener("click", function(event){
        alert(11111);
 }, true);

});
$('iframe').attr("src","JavaScript:'iframe content'");

我的问题很明确。当我尝试单击 iframe 'a' 标签时，为什么我没有收到警报（11111）？为什么不举行事件冒泡，通过代码访问事件冒泡的方法是什么？

也参考Fiddle link

【问题讨论】：

这是同源策略的结果，除非它同意，否则您无法与来自另一个域的代码进行通信，即使这样也是消息传递。
我的问题很清楚。当我尝试单击 iframe 'a' 标签时，为什么我没有收到警报（11111）？

标签： javascript jquery html events iframe

【解决方案1】：

冒泡只能通过单个文档树发生。 iframe 是一个单独的 文档树，因此在其树中冒泡的事件在 iframe 文档的根处终止，并且不会越过边界进入主文档。

捕获从树的顶部开始操作，通常是文档，向下

~Document Object Model Events: 1.2.2. Event capture

这种向上传播将持续到并包括文档。

~Document Object Model Events: 1.2.3. Event bubbling

【讨论】：

我们如何手动将事件传播到 iframe 中？