js弹出层点层以外任意地隐藏,这个问题很早之前解决过,自己比较偷懒就没记录下来,最近做一个效果再次碰到,网上搜到了相关方法,现在把方法整理一下
关键在 e.stopPropagation()方法,该方法是在Event对象中,说明是停止某事件的传播。
相关说明:http://www.w3school.com.cn/jsref/event_stoppropagation.asp
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<style>
div{
position: absolute;
width: 300px;
height: 150px;
border: 1px solid #ddd;
background: #ddd;
display: none;
z-index: 99999;
}
span{
position: absolute;
left: 35%;
top: 25%;
}
</style>
<script>
$(function (){
$('#area').click(function(){
var offset = $(this).offset();
$('div').css({top:offset.top,left:offset.left});
$('div').show();
$('div').mousedown(function (e){
e.stopPropagation();
});
$(document).mousedown(function (){
$('div').hide();
});
});
});
</script>
</head>
<body>
<span>
地区:<input id="area" type="text"></span>
<div >
这是一个层
</div>
</body>
</html>