Question

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

显而易见的解决方案是在文档上放置一个单击处理程序。这很好，除了应用程序的其他部分使用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，因此不需要它的解决方案将是最佳的。

Answer 1

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

上的@Tim Down的回答

如果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？

1 个答案: