阻止冒泡事件demo

最新推荐文章于 2024-01-06 15:15:25 发布

weixin_30696427

最新推荐文章于 2024-01-06 15:15:25 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/janney/p/6703137.html

版权

<!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 src="jquery-1.7.2.min.js"></script>
<meta charset="utf-8">
<title>阻止冒泡事件demo</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>