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

Question

我有自己编写的对话框，单击外部时它会关闭（否 overlay/backdrop）。

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

这里是a JSBIN to illustrate the problem. (http://jsbin.com/vuneyopedu/edit?js,console,output)

在下面的截图中简单说明一下：

单击红色对话框增量。
单击外部对话框（黄色和绿色）应该递减，但只有黄色有效。
单击 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 中添加事件处理程序，然后将其绑定到父容器 window。这在很多层面上都是错误的：没有关注点分离，来自不同域的 iframe 将由于 CORS 而被阻止，即使不需要，iframe 也会向任何和所有父级注册，等等。

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

Detect click outside div doesn't work if click target is iframe

javascript

iframe

dialog

dom-events