首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根。

阻止冒泡:1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true,对于IE浏览器,

而Jquery已经有兼容浏览器的方法,​​event.stopImmediatePropagation()​​;



1     <style>
2         body
3       {
4             background:black;
5       }
6         #myDiv
7       {
8             background: #fff;
9             width:250px;
10             height:250px;
11             display:none;
12       }
13   </style>
14     <div id="myDiv">
15         This is a div;
16     </div>
17     <input id="btn" type="button" value="显示DIV" />
18     <script type="text/javascript">
19     var myDiv = $("#myDiv");
20         $(function () {
21             $("#btn").click(function (event) {
22                 showDiv();//调用显示DIV方法
23                 $(document).one("click", function () {//对document绑定一个影藏Div方法
24                     $(myDiv).hide();
25                 });
26                 event.stopPropagation();//阻止事件向上冒泡
27             });
28             $(myDiv).click(function (event) {
29                 event.stopPropagation();//阻止事件向上冒泡
30             });
31         });
32     function showDiv() {
33             $(myDiv).fadeIn();
34         }
35 </script>