便于用户操作体验,除了加一个关闭按钮外,一般还会加一个点击弹窗外的空白处也能关闭弹窗的操作。
推荐写法
$(document).mouseup(function(e){
var _con = $(' 目标区域 '); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
some code... // 功能代码
}
});
原理:
判断点击事件发生在区域外的条件是:
- 点击事件的对象不是目标区域本身
- 事件对象同时也不是目标区域的子元素
普通写法
$(document).mouseup(function(e){
var _con = $(' 目标区域 '); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
some code... // 功能代码
}
});
var 按钮=document...;
var div=document....;
//点击按钮弹出div 在点击按钮关闭该div
按钮.onclick=function() {
if(div.style.display=="none") {
div.style.display="block";
} else {
div.style.display="none";
}
}
//点击其他地方关闭div
document.onclick=function() {
div.style.display="none";
}
//为了防止点击div 也关闭div 所以这里要防止冒泡
div.onclick=function() {
return false;
}