jquery中使用event.stopPropagation()阻止事件冒泡
Posted 我分享我快乐
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery中使用event.stopPropagation()阻止事件冒泡相关的知识,希望对你有一定的参考价值。
案例如上图:点文档关闭菜单,点按钮打开菜单。因为按钮在文档内,所以会产生事件冒泡使得在点按钮打开菜单时无法正常执行。所以我们需要阻止事件冒泡。例子代码如下:
<!doctype html>
<html>
<head>
<style>
.box{width:200px;height:200px;background-color:green;}
span{display:block;width:100px;height:30px;background-color:skyblue;}
</style>
<script ></script>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<span>按我</span>
<div class="box">消失的盒子</div>
<script>
//点span显示盒子
$("span").click(
function(){
event.stopPropagation()//阻止事件冒泡
$(".box").show()
}
)
//点文档隐藏盒子
$(document).click(
function(){
$(".box").hide()
}
)
</script>
</body>
</html>
以上是关于jquery中使用event.stopPropagation()阻止事件冒泡的主要内容,如果未能解决你的问题,请参考以下文章