即使在具有stopPropagation的元素上单击也隐 藏所有单击事件上的元素

Question

我有一个元素，当单击页面上的任何位置时，即使在具有e.stopPropagation()的元素上，也需要隐藏。

我已经尝试过

$(document).on("click",function(){
    $("#mydiv").hide();
});

哪一个有效但对具有以下内容的元素不起作用：

$(document).on("click","#someDiv",function(e){
    e.stopPropagation();
});

如何在不删除#someDiv的情况下使我的元素隐藏在stopPropagation上。我之所以需要这种灵活性，是因为我正在编写一个插件，任何人都可以使用，并且对页面上的单击事件或元素ID一无所知。

是否可以将隐藏的元素绑定到所有点击？对JS或jQuery解决方案感到满意。

我知道这是有可能的，因为我已经看到其他插件可以做到这一点。

提前感谢您的任何建议！

Answer 1

[可能是与您现有代码最快，最兼容的解决方案是换出#mydiv隐藏的侦听器，以使用香草JS addEventListener利用addEventListener可选的第三个参数在所有内部元素具有自己的听众被解雇的机会。在下面的代码段中查看其运行情况：

useCapture

document.addEventListener("click",function(){
    $("#mydiv").hide();
}, true);

$("#someDiv").on("click",function(e){
    console.log('some div clicked!');
    e.stopPropagation();
});

.container {
  height: 100vh;
  width: 100vw;
  background-color: pink;
}

#mydiv {
  background-color: cyan;
}

#someDiv {
  background-color: lavender;
}

Answer 2

您可以执行类似的操作，通过使用]向页面上的所有元素添加一个额外的EventListener。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="mydiv">Hide me!</div>
  <div id="someDiv">I'll stop propagation!</div>
</div>