如果点击目标是 iframe，则检测 div 外的点击不起作用答案

【问题标题】：Detect click outside div doesn't work if click target is iframe如果点击目标是 iframe，则检测 div 外的点击不起作用
【发布时间】：2016-01-25 18:10:55
【问题描述】：

我有一个我写的对话框，当点击外部时它会关闭（没有覆盖/背景）。

它工作得很好除非有一个 iframe，在这种情况下，我的外部点击监听器永远不会被调用。

这里是a JSBIN 来说明问题。 (http://jsbin.com/vuneyopedu/edit?js,console,output)

在下面的截图中简要说明：

单击 RED 对话框增量。
单击外部对话框（黄色和绿色）应该会减少，但只有黄色有效。
点击iframe（绿色）时，从不调用外部点击的事件监听器

问题是 - 如何使点击红色方块外的任何东西（特别是点击 iframe）减少数字。（或在“真实”世界中关闭对话框）

【问题讨论】：

标签： javascript iframe dialog dom-events

【解决方案1】：

如何将事件绑定到 iframe 的文档。

iframes = document.getElementsByTagName('iframe');
iframesArray = Array.prototype.slice.apply(iframes);

iframesArray.forEach(function(frame) {
  frame.contentWindow.document.addEventListener('click', function() {
    inc();
  }, true);
});

【讨论】：

效果很好！谢谢！
如果 iframe 是别人的网站，而不是你的代码怎么办？

【解决方案2】：

这里的正确方法是使用模态和最强大的模态用例之一。通过设计，模态可以防止点击进入下面的元素，因此无需处理 iframe 问题或e.stopPropagation() 或其他任何副作用。它还使定位非常干净。

作为旁注，当前接受的答案是一种非常糟糕的方法，因为它依赖于在 iFrame 中添加事件处理程序，然后将其绑定到父容器窗口。这在很多层面上都是错误的：没有分离关注点，来自不同域的 iframe 将因 CORS 而被阻止，即使在不需要时，iframe 也会向任何和所有父级注册，等等。

【讨论】：

模式如何帮助消除 CORS 的任何问题，如果您想从内部 iframe 捕获所有点击，您必须将其添加到顶级文档中。