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

所以我有我写的对话框，它关闭时点击外部（没有覆盖/背景）。检测点击外部div不工作，如果点击目标是iframe

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

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

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

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

的问题是 - 如何使点击什么红场外（具体点击的iframe）减少数量。（或关闭对话框，在“真实”世界中）

来源

2016-01-25 Ben

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

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

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

来源

2016-01-25 19:23:38

作品！谢谢！ – Ben

如果iframe是别人的网站，而不是你的代码？ – trusktr

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

作为一个侧面说明，目前公认的答案是一个非常贫穷的方法，因为它依赖于添加iFrame中的事件处理程序，然后绑定到父容器窗口。这是错误的在许多层面上：没有来自不同域的分离的担忧，IFRAME会被阻止，由于CORS，IFRAME将与任何和所有的父母很好，即使登记在不需要的时候，等

来源

2017-10-10 07:44:51 aleemb

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

回答

相关问题