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'标签时为什么我没有得到警报（11111）？为什么没有举行事件冒泡，以及通过代码访问事件的方式是什么？

也参考Fiddle link

Answer 1

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

Capture从树的顶部开始操作，通常是Document，向下

〜Document Object Model Events: 1.2.2. Event capture

此向上传播将继续包括文档在内。

〜Document Object Model Events: 1.2.3. Event bubbling

事件冒泡不会发生在IFrame中

1 个答案: