如果单击目标是iframe，则检测单击外部div不起作用

Question

所以我得到了我写的对话框，在外面点击时关闭（没有叠加/背景）。

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

以下是a JSBIN来说明问题。 （http://jsbin.com/vuneyopedu/edit?js,console,output）

在下面的截图中简要解释一下：

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

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

Answer 1

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

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

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

Answer 2

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

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