如何在 iframe 周围的 div 上捕获 click 或 mousedown 事件。我已经尝试将函数附加到 div 上的 click 事件，但由于 iframe 永远不会将事件冒泡到周围的 div，因此永远不会调用该函数。有没有办法可以捕获 div 上的事件，然后将其传播到 iframe 以进行默认操作？
捕获对 iframe 周围 div 的点击
IT技术
javascript
event-handling
dom-events
event-bubbling
2021-01-27 17:07:17
3个回答
如果点击在 iframe 区域内，则 iframe 上下文处理点击事件，它不会冒泡到 iframe 父级。所以如果它发生在 iframe 区域，div 将永远不会注册点击事件。
此外，如果 iframe 包含与 iframe 父级不属于同一域的页面，则禁止任何交互（重新同源策略）。
当满足同源策略时，你可以做一些事情，你可以在 iframe 父上下文中调用一个方法：
top.parentFunction();
因此，在 iframe 中添加一个事件侦听器，该侦听器委托给 iframe 父级（可通过top引用访问）。
传播事件要复杂得多，所以我只想参考Diego Perini 的 NWEvents 库。我相信他的事件系统是最好的系统之一，而且他特别擅长 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>
此脚本将每 200 毫秒检查一次用户是否在 Iframe 中。当然，他们可能没有点击 Iframe 到达那里，但恐怕这是没有@BGerrissen 解决方案的最佳选择。
它只会检测第一次“点击”，除非您再次点击。它只适用于真正现代的浏览器。