<!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>