javascript 捕获对 iframe 周围 div 的点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3690812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Capture click on div surrounding an iframe
提问by Gunjan
How can I capture a click or mousedown event on a div surrounding an iframe. I've tried attaching the function to click event on the div but since the iframe never bubbles the event up to the surrounding div the function is never called. Is there a way I can capture the event on the div and then propagate it to the iframe for default action?
如何在 iframe 周围的 div 上捕获 click 或 mousedown 事件。我已经尝试将函数附加到 div 上的 click 事件，但由于 iframe 永远不会将事件冒泡到周围的 div，因此永远不会调用该函数。有没有办法可以捕获 div 上的事件，然后将其传播到 iframe 以进行默认操作？
采纳答案by BGerrissen
If the click is in the iframe area, the iframe context handles the click event, it does not bubble up to the iframe parent. So the div will never register the click event at all if it happened in the iframe area.
如果点击在 iframe 区域内，则 iframe 上下文处理点击事件，它不会冒泡到 iframe 父级。所以如果它发生在 iframe 区域，div 将永远不会注册点击事件。
Furthermore, if the iframe contains a page that does not belong to the same domain as the iframe parent, any interaction is prohibited (re. same origin policy).
此外，如果 iframe 包含与 iframe 父级不属于同一域的页面，则禁止任何交互（重新同源策略）。
When the same origin policyis met, there are a few things you can do, you could call a method in the iframe parent context:
当满足同源策略时，你可以做一些事情，你可以在 iframe 父上下文中调用一个方法：
top.parentFunction();
So in the iframe you add an event listener that delegates to the iframe parent (accessible with the topreference.
因此，在 iframe 中添加一个事件侦听器，该侦听器委托给 iframe 父级（可通过top引用访问）。
Propagating events is a lot more complicated, so I'm simply going to refer to Diego Perini's NWEvents library. I believe his event system to be one of the better ones out there and he's particular on iframe interaction.
传播事件要复杂得多，所以我只想参考Diego Perini 的 NWEvents 库。我相信他的事件系统是最好的系统之一，而且他特别擅长 iframe 交互。
I certainly would not start writing your own code to achieve this, this can easily be a year long project if you want to do it properly and even then will be inferior to Diego's work.
我当然不会开始编写您自己的代码来实现这一点，如果您想正确地完成它，这很容易成为长达一年的项目，即使这样也会不如 Diego 的工作。
回答by Brendon
There's no "good" way to do it, but if you really need to detect a click on an Iframe, you can kind-of do it in the latest browsers.
没有“好”的方法可以做到这一点，但是如果您真的需要检测 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>
This script will check every 200ms whether the user is in the Iframe. Of course, they may not have clicked on the Iframe to get there, but I'm afraid this is the best you can do without @BGerrissen's solution.
此脚本将每 200 毫秒检查一次用户是否在 Iframe 中。当然，他们可能没有点击 Iframe 到达那里，但恐怕这是没有@BGerrissen 解决方案的最佳选择。
It will detect the first 'click' only, unless you click out again. It only works in really modern browsers.
它只会检测第一次“点击”，除非您再次点击。它只适用于真正现代的浏览器。
回答by parliament
You can use a library like portholeto pass messages between parent and iframe, even across domains. Using this wouldn't exactly propagate the event (you won't be able to get the event object), but you can create your own event in the form of a simple message, and then handle it in the parent as a click.
您可以使用像porthole这样的库在父级和 iframe 之间传递消息，甚至跨域。使用它不会完全传播事件（您将无法获得事件对象），但您可以以简单消息的形式创建自己的事件，然后在父级中作为单击处理它。
However, I've used Brendon's answer as it's simpler works for my current need.
但是，我使用了 Brendon 的答案，因为它更简单地满足我当前的需求。
