JQ阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#btn").click(function(e){
//阻止冒泡
e.stopPropagation();
$("div").show();
//显示之后给document绑定click事件。给click绑定命名空间.bl
$(document).on("click.bl",function(){
//测试click是否绑定
alert("1");
$("div").hide();
//隐藏div后通过click命名空间.bl解除document click事件。
$(document).off(".bl");
})
});
$("div").on("click",function(e){
//阻止冒泡
e.stopPropagation();
})
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: darkblue;
margin: 100px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="显示" />
<div style="display: none;"></div>
</body>
</html>
