<!DOCTYPE html >
<html >
<head>
<meta charset="UTF-8">
<title>点击空白处关闭弹出窗口</title>
<style type="text/css">
.pop{width:200px;height:130px;background:#080;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function() {
$('#pop').show("slow");//open dialog
});
$(document).bind("click",function(e){
var target = $(e.target);//表示当前对象,切记,如果没有e这个参数,即表示整个BODY对象
console.info(target.closest(".pop").length)
console.info(target.closest("#btn").length)
if(target.closest(".pop").length == 0 && target.closest("#btn") ==0){
$("#pop").hide();
}
})
})
</script>
</head>
<body>
<button id="btn">打开div</button>
<div id="pop" class="pop" style="display: none"></div>
</body>
</html>
上面是完整的代码,主要想实现,点击按钮显示div,然后点击除按钮和div外的空白,隐藏div,
目前的问题是,可以打开div,但是不能隐藏div,请大虾帮忙看下代码是哪里出问题了;
主要的困惑是target.closest(".pop").length==0为true,target.closest("#btn").length==0为true;为什么target.closest(".pop").length == 0 && target.closest("#btn") ==0就为false了