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>