点击空白处关闭弹出窗口

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>点击空白处关闭弹出窗口</title> <style type="text/css"> .pop{width:200px;height:130px;background:#080;} </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(document).bind("click",function(e){ var target = $(e.target);//表示当前对象，切记，如果没有e这个参数，即表示整个BODY对象 if(target.closest(".pop").length == 0){ $(".pop").hide(); } }) }) </script> </head> <body> <div class="pop"></div> </body> </html>

提示：你可以先修改部分代码再运行。

另:第九期：点击空白关闭弹窗的优雅实现

$(document).click(function(e){
  var _con = $(' dom ');   // 设置dom
  if(!_con.is(e.target) && _con.has(e.target).length === 0){ 
    //do something   // 具体实现
  }
});

判断点击事件发生在区域外的条件是：
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素

// is() 方法用于查看选择的元素是否匹配选择器。
// 比如：
// 如果  的父元素是 
 元素，弹出提示信息:
if ($("p").parent().is("div")) {
    alert("p 的父元素是 div"); 
}

转载请注明：有爱前端 » 点击空白处关闭弹出窗口