时间戳

首页 > 解决方案 > 即使单击具有 stopPropagation 的元素，也隐藏所有单击事件上的元素

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

问题描述

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

我试过了

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

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

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

如何在#someDiv不删除stopPropagation. 我需要这个灵活的原因是我正在编写一个任何人都可以使用的插件，并且不会知道页面上的点击事件或元素 ID。

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

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

在此先感谢您的任何建议！

标签： javascriptjquery

解决方案

与现有代码最快和最兼容的解决方案可能是更换#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>

推荐阅读