DIV外区域Click后关闭DIV

首先看下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>