javascript - 即使单击具有 stopPropagation 的元素，也会在所有单击事件中隐藏元素

Question

我有一个元素，我需要在点击页面上的任何地方时隐藏它，即使是在具有 e.stopPropagation() 的元素上也是如此。

我试过了

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

哪个有效但不适用于具有以下内容的元素:

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

如何在不删除 stopPropagation 的情况下隐藏我的元素甚至在 #someDiv 上。我需要它具有灵 active 的原因是我正在编写一个任何人都可以使用的插件，并且不会知道有关页面上的点击事件或元素 ID 的任何信息。

有没有一种方法可以将元素的隐藏绑定(bind)到所有点击？对 JS 或 jQuery 解决方案感到满意。

我知道这一定是可能的，因为我已经看到其他插件这样做了。

提前感谢您的任何建议!

Answer 1

可能与现有代码最快捷、最兼容的解决方案是换掉 #mydiv 隐藏监听器以使用 vanilla JS 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;
}

<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>