弹出菜单 阻止冒泡

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>弹出菜单,阻止冒泡</title>
<style>

</style>
<script src="jquery-1.9.1.js"></script>
<script>
$(function(){
$("button").click(function(ev){
$("div").css("display","block");
ev.stopPropagation();//阻止冒泡(子级发生事件的时候往父级传递,导致父级的事件也同时发生)
//return false; 同时阻止冒泡和默认事件
});
$(document).click(function(){
$("div").css("display","none");
});
});
</script>
</head>
<body>
<button>点击</button>
<div style="width:200px;height:200px;background:pink;display:none;"></div>
</body>
</html>
补充:document是整个文档最顶层的父节点,所以在document上加事件时,不管点击网页的什么地方都可以触发。

 

posted @ 2016-10-26 18:42  2350305682  阅读(121)  评论(0编辑  收藏  举报