单击文档中其他任何位置时触发，即使使用iframe也是如此

Trigger on a click anywhere else in the document, even with iframes?

本文关键字：iframe 其他 文档 任何 位置 单击      更新时间：2023-09-26

所以我正在创建一个小部件，如果用户点击它之外的任何地方，它都应该"关闭"。

显而易见的解决方案是在文档上放置一个点击处理程序。这很好，只是应用程序的其他部分使用event.stopPropagation（）。所以我们在侦听器中使用捕获阶段来绕过这一点。

这似乎适用于所有，除了在iframe上。我做了一个简单的jsfiddle来演示我在说什么。代码的文字记录：

var c = document.getElementById('clickme');
var s = document.getElementById('stop');
var t = document.getElementById('text');
document.addEventListener('click', function (event) {
  if (event.target !== c) {
    t.innerHTML += 'outside <br>';
  } else {
    t.innerHTML += 'inside <br>';
  }
}, true); //true to use capturing phase
s.addEventListener('click', function (event) {
  event.stopPropagation();
});

设置：

<html>
<body>
  <p>Clicking anywhere but the button counts as an 'outside' click. However, clicks within the iframe do not trigger the event listener.</p>
  <div><button id="clickme">Click me!</button></div>
  <iframe>lalala</iframe>
  <div><button id="stop">Even Me, and I stopPropagation()</button></div>
  <div id="text"></div>
</body>
</html>

有没有什么方法可以让这个处理程序在iframe内/上的点击时也触发？此外，在附加事件侦听器时，我不会引用iframe，因此不需要它的解决方案是最好的。

只有在iframe位于同一域时，才能检测到该iframe中的单击事件。查看@Tim Down在JavaScript中的回答：检测到iframe 内的链接点击

如果iframe在另一个域上，则可以利用单击iframe时文档上将发生模糊事件的事实。您需要在body元素上设置一个tabIndex才能工作：

document.body.tabIndex= 0;
document.addEventListener('blur', function (event) {
  t.innerHTML += 'outside <br>';
}, true);

请注意，在iframe中多次单击只会触发一个模糊事件。

Fiddle：http://jsfiddle.net/zrgrt9pf/13/

接受的答案对我不起作用，所以我想出了另一个解决方案。

const closeWidget = (e) => {
  // closing logic here
}
// window.parent is reffering to window object wich contains
// document where you embed iframe 
const parentDocument = window.parent.document
// adding event listener to parent document itself
parentDocument.body.addEventListener('click', closeWidget)
// adding event listeners to documents within all embedded iframes (i had more than one)
Array.from(parentDocument.getElementsByTagName('iframe'))
  .forEach(iframe => {
    iframe.contentDocument.body.addEventListener('click', closeWidget)
  })
相关文章：