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

问题描述 投票:1回答:2

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

我已经尝试过

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

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

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

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

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

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

提前感谢您的任何建议!

javascript jquery
2个回答
0
投票

[可能是与您现有代码最快,最兼容的解决方案是换出#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;
}

0
投票

您可以执行类似的操作,通过使用]向页面上的所有元素添加一个额外的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>

推荐问答