空白处点击关闭DIV层
继续以我的DIV+JS弹出层并置灰窗口为不可点击状态 为例，在弹出层以后，有时候会有这样一种需求，需要在层以外的空白地方根据鼠标点击事件空白处关闭弹出层！这是个很有意思的东西，其实很简单，不像网上大多数人给出的代码那样复杂，原理就是捕获拦截鼠标按下事件，拿到事件句柄，在做完自己的处理后，继续向下传播或者阻止事件继续向下传播。
看代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html><head><title>弹出层</title><meta http-equiv="Content-type" content="text/html;charset=utf-8"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="description" content="This is my page"><style>body {margin: 0 0;padding: 0 0;}.myd {height: 100%;margin: 0 0;padding: 0 0; width : 100%;position: absolute;z-index: 10000;background-color: gray;width: 100%; opacity:0.8;/* 实现透明 */}.pd {background: #c2ee11;height: 300px;width: 450px;position: absolute;z-index: 10002;}</style></head><script type="text/javascript"> var flag=1; //这是核心的地方，用来拦截鼠标点击事件 function fnOnMouse(event){ flag = flag+1; document.getElementById("binfo").innerHTML=flag; var targ;if (!e) var e = window.event;if (e.target) targ = e.target;else if (e.srcElement) targ = e.srcElementif (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNodevar tname;tname=targ.tagName;//这里的对象是弹出层的display属性值，根据自己的ID属性来进行相应的业务逻辑处理，根据需要决定事件是否需要继续向下传播，返回true即传播，false不传播，这是js本身，没有使用任何第三方js库var pds = document.getElementById("pd").style.display;var f = (tname == "DIV" && pds == "block" && targ.id == "pd");if(!f){ close_div();}else{ return false;}return true; } //window.onmousedown = fnOnMouse; function pop(){ document.getElementById("md").style.display="block"; //clientWidth取的是实际窗口文档域的大小 var _x = document.body.clientWidth; var _y = document.body.clientHeight; var a_w = 450; var a_h = 300; //alert(_x+" == " + _y); //计算弹出层的位置，目的是要显示在正中间 var dleft = _x/2 - a_w/2; var dtop = _y/2 - a_h/2; var cd = document.getElementById("pd").style; cd.left=dleft+"px"; cd.top = dtop+"px"; cd.display="block"; } function close_div(){ document.getElementById("md").style.display="none"; document.getElementById("pd").style.display="none"; }</script><body onmousedown="fnOnMouse(event)"><!-- 遮盖层 --><div style="display: none;" id="md"></div><!-- 弹出层 --><div style="display: none" id="pd"><button onclick="close_div()"style="height: 20px;background: red;width: 100%;text-align: right">点击关闭层：X</button><label>这里是要显示的内容</label></div><input type="button" onclick="pop()" value="弹出层"><br> This is my JSP page.<br><div style="width:100%;height: 100px;background: red;" id="binfo"onclick="alert(1);"></div><span onclick="alert('so easy...');"style="margin: 20px auto;height: 100px;width: 100%; display:inline-block; background-color: gray;">click me,the dom event will still continue to propagate normally </span><br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br> This is my JSP page.<br></body></html>$(document).bind("click",function(e){var target = $(e.target);if(target.closest("#pd").length == 0){$("#pd").hide();}})