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

256 阅读 0 评论 169 点赞

我是靠谱客的博主欣喜鞋子，最近开发中收集的这篇文章主要介绍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> 