IFrame中不会发生事件冒泡

Question

我认为这是一个无辜的问题，但实际上我仍然不知道答案。

我们都知道事件冒泡会将事件引导到其预定目标，它的工作原理如下：当单击按钮时，事件会被引导到该按钮。如果该对象设置了事件处理程序，则触发事件。如果该对象未设置事件处理程序，则事件会向上冒泡（就像水中的气泡）到对象的父级。

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'标签时，为什么我没有收到alert(11111)？ 为什么事件冒泡没有被触发，有哪些方法可以通过代码访问事件冒泡？

还请参考Fiddle链接

- Sudharsan S

---

这是同源策略的结果，除非它同意并且即使如此也是通过消息传递，否则您无法与来自另一个域的代码进行通信。 - Benjamin Gruenbaum

我的问题很清楚。当我尝试点击iframe中的'a'标签时，为什么我没有收到警报（11111）？ - Sudharsan S

Answer 1

冒泡事件只会在单个文档树中发生。而iframe是一个独立的文档树，因此通过其树形结构冒泡的事件会在iframe文档的根节点处终止，不会穿越边界进入宿主文档。

捕获操作从树的顶部（一般为文档）向下执行。

~ 文档对象模型事件：1.2.2. 事件捕获

这种上行传播将一直持续到包括文档本身。

~ 文档对象模型事件：1.2.3. 事件冒泡

- Sean Vieira

---

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