即使单击具有stopPropagation的元素，也可以隐藏所有单击事件的元素

debugcn 发表于 Dev

第一军团

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

我试过了

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

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

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

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

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

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

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

亚历山大·尼德

与您现有代码最快，最兼容的解决方案可能是换出#mydiv隐藏的侦听器，以使用香草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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。