即使使用 iframe，也可以触发文档中其他任何位置的单击？答案

【问题标题】：Trigger on a click anywhere else in the document, even with iframes?即使使用 iframe，也可以触发文档中其他任何位置的单击？
【发布时间】：2014-10-20 21:41:44
【问题描述】：

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

显而易见的解决方案是在文档上放置一个点击处理程序。这很好，除了应用程序的其他部分使用 event.stopPropagation()。所以我们在监听器中使用捕获阶段来解决这个问题。

这似乎适用于一切，iframe 除外。我做了一个simple jsfiddle to demonstrate what I'm talking about。代码抄本：

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，因此最好使用不需要它的解决方案。

【问题讨论】：

标签： javascript iframe

【解决方案1】：

只有当 iframe 位于同一个域中时，您才能在 iframe 中检测到点击事件。请参阅@Tim Down 在JavaScript: Detection of a link click inside an iframe的答案@

如果 iframe 位于另一个域中，您可以利用点击 iframe 时文档上会发生模糊事件这一事实。您需要在 body 元素上设置 tabIndex 才能使其工作：

document.body.tabIndex= 0;

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

请注意，iframe 内的多次点击只会触发一个模糊事件。

小提琴：http://jsfiddle.net/zrgrt9pf/13/

【讨论】：

哦，我没有意识到在 iframe 中单击会触发模糊。我认为这将非常适合我的目的！