javascript - IFrame 中不会发生事件冒泡

标签 javascript jquery html events iframe

<分区>

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

我们都知道,事件冒泡是将事件定向到它预定的目标,它的工作原理是这样的:一个按钮被点击,事件被定向到该按钮。如果为该对象设置了事件处理程序,则会触发该事件。如果没有为该对象设置事件处理程序,则该事件会向上冒泡(就像水中的气泡)到父对象。

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 是一棵独立文档树,因此冒泡通过其树的事件在 iframe 文档的根部终止,不会跨越边界进入宿主文档。

Capture operates from the top of the tree, generally the Document, downward

~ Document Object Model Events: 1.2.2. Event capture

This upward propagation will continue up to and including the Document.

~ Document Object Model Events: 1.2.3. Event bubbling

关于javascript - IFrame 中不会发生事件冒泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40109631/

相关文章:

javascript - 如何通过使用javascript有选择地添加或删除字符来转换字符串

选中的 JavaScript 复选框不起作用

javascript - 如何获取视频的精确时间更新以返回最多 2 位小数(毫秒)?

javascript - 从不同组中选择单选按钮的组合

html - 如何制作拉伸(stretch)子项并尊重最小高度 : 0 on them? 的 CSS 网格

javascript - 在 JSP 中使用 Jquery 自动完成时如何设置自动完成输入框的值

javascript - parseInt 改变整数

jquery - jquery 动画后的 css 更改

javascript - 为什么 (jQuery) 在函数右括号之后

javascript - wordpress主题中的jquery冲突