Javascript 捕获单击iframe周围的div

如何在iframe周围的div上捕获click或mousedown事件。我已经尝试在div上附加函数click event，但是由于iframe从未将事件冒泡到周围的div上，因此从未调用该函数。是否有一种方法可以捕获div上的事件，然后将其传播到iframe以进行默认操作？

如果单击位于iframe区域，iframe上下文将处理单击事件，它不会冒泡到iframe父级。因此，如果单击事件发生在iframe区域中，div将永远不会注册它

此外，如果iframe包含与iframe父级不属于同一域的页面，则禁止任何交互（请参阅）

当满足时，您可以做一些事情，可以在iframe父上下文中调用一个方法：

top.parentFunction();

因此，在iframe中添加一个事件侦听器，该侦听器委托给iframe父对象（可通过

top

引用访问）

传播事件要复杂得多，所以我将简单地提及。我相信他的事件系统是其中一个更好的系统，他对iframe交互非常重视

我当然不会开始编写您自己的代码来实现这一点，如果您想正确地完成这一项目，这很容易是一个长达一年的项目，即使这样做也不如Diego的工作。

没有“好”的方法来完成，但是如果您真的需要检测Iframe上的点击，您可以在最新的浏览器中完成

<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe>

<script type="text/javascript">
var inIframe = false;
function checkClick() {
    if (document.activeElement 
      && document.activeElement === document.getElementById("iframe")) {
        if (inIframe == false) {
            alert("iframe click");
            inIframe = true;
        }
    } else
        inIframe = false;
}
setInterval(checkClick, 200);
</script>

var-inIframe=false；
函数checkClick（）{
if（document.activeElement
&&document.activeElement==document.getElementById（“iframe”））{
如果（inIframe==false）{
警报（“iframe单击”）；
inIframe=真；
}
}否则
inIframe=false；
}
设置间隔（点击复选框，200）；

此脚本将每隔200毫秒检查一次用户是否在Iframe中。当然，他们可能没有单击Iframe到达那里，但我恐怕这是没有@BGerrissen解决方案的最好方法

---

除非您再次单击，否则它将仅检测第一次“单击”。它仅适用于真正现代的浏览器。

您可以使用类似于在父级和iframe之间传递消息的库，甚至跨域传递消息。使用此库不会准确传播事件（您将无法获取事件对象），但您可以以简单消息的形式创建自己的事件，然后在父级中以单击的方式处理它

<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe>

<script type="text/javascript">
var inIframe = false;
function checkClick() {
    if (document.activeElement 
      && document.activeElement === document.getElementById("iframe")) {
        if (inIframe == false) {
            alert("iframe click");
            inIframe = true;
        }
    } else
        inIframe = false;
}
setInterval(checkClick, 200);
</script>

---

然而，我使用了Brendon的答案，因为它更简单，适合我当前的需要。

就像iPhone的魅力一样工作。我试图检测点击社交分享按钮（即iframe），用这种方法制作了一个微小的角度指示，哇，它工作得很好！谢谢！不允许在父帧或父帧上调用函数（现在），不幸的是，这将不起作用（不再）。作为旁注，有

window.parent

（父框架）和

window.top

（始终是最顶部的框架，即用户在浏览器中打开的页面）。