捕获点击围绕 iframe 的 div

Question

如何在 iframe 周围的 div 上捕获 click 或 mousedown 事件。 我尝试将函数附加到 div 上的单击事件，但由于 iframe 永远不会将事件冒泡到周围的 div，因此永远不会调用该函数。 有没有办法可以捕获 div 上的事件，然后将其传播到 iframe 以进行默认操作？

Answer 1

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

此外，如果 iframe 包含与 iframe 父级不属于同一域的页面，则禁止任何交互（关于同源策略）。

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

top.parentFunction();

因此，在 iframe 中，您添加了一个委托给 iframe 父级的事件侦听器（可通过top引用访问。

传播事件要复杂得多，所以我只是参考Diego Perini 的 NWEvents 库。 我相信他的事件系统是目前最好的之一，而且他特别关注 iframe 交互。

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

Answer 2

没有“好”的方法可以做到这一点，但如果你真的需要检测对 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>

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

它只会检测第一次“点击”，除非您再次点击退出。 它只适用于真正现代的浏览器。

Answer 3

您可以使用像porthole这样的库在父级和 iframe 之间传递消息，甚至可以跨域传递消息。 使用它不会完全传播事件（您将无法获取事件对象），但您可以以简单消​​息的形式创建自己的事件，然后在父级中将其处理为单击。

这是他们的例子

但是，我使用了 Brendon 的答案，因为它更简单地满足我当前的需求。

Answer 4

如果你登陆这里是因为你需要跟踪一个 PayPal 按钮的点击（比如我），并且你可以访问 JavaScript SDK，你可以通过在初始化中添加onClick回调来监听点击。

例子：

paypal.Buttons({
  onClick() {
    // here you can track the click 
  }
}).render('#paypal-container');

链接到文档： https ://developer.paypal.com/sdk/js/reference/#link-oninitonclick。