DIV外区域Click后关闭DIV的实现代码

  阻止冒泡:

  1、stopPropagation()对于非IE浏览器。

  2、cancelBubble属性为true,对于IE浏览器,

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

  

复制代码 代码如下:

  <style>

  body

      {

  background:black;

      }

  #myDiv

      {

  background: #fff;

  width:250px;

  height:250px;

  display:none;

      }

  </style>

  <div id="myDiv">

  This is a div;

  </div>

  <input id="btn" type="button" value="显示DIV" />

  <script type="text/javascript">

    var myDiv = $("#myDiv");

  $(function () {

  $("#btn").click(function (event) {

  showDiv();//调用显示DIV方法

  $(document).one("click", function () {//对document绑定一个影藏Div方法

  $(myDiv).hide();

  });

  event.stopPropagation();//阻止事件向上冒泡

  });

  $(myDiv).click(function (event) {

  event.stopPropagation();//阻止事件向上冒泡

  });

  });

    function showDiv() {

  $(myDiv).fadeIn();

  }

  </script>