当点击绿色区域以外的页面时,隐藏绿色区域?这个用jquery怎么写?
首先可以给 document
对象绑定 click
事件。
然后由于事件冒泡机制,你单击文档的任意地方(包括绿色区域)都会触发 click
事件。
先在事件里写上隐藏绿色区域的代码
$(document).on('click',function(e){
$('#aaa').hide();
});
然后,再给绿色区域绑定click
事件,这时候阻止事件冒泡,这样一来,点击绿色区域的话,是不会隐藏掉自己的。
$('#aaa').on('click',function(e){
e.stopPropagation();
});
@我是好人的回答没有问题,但是需要绑定两次事件。个人觉得不是太好。
原生javascript写法:
/*
* aaa如果是放在一个遮罩蒙层里,那么就绑定这个遮罩蒙层的点击事件。若是直接放在body里
* 绑定document的点击事件也行。
*/
document.addEventListener(function( e ){
// 判断被点击的元素是不是aaa元素,不是的话,就隐藏之
if( e.target !== aaa ){
aaa.style.display = "none";
}
},false)
jQuery写法:
document.on('click',function(e){
if( e.target !== aaa ){
aaa.hide();
}
});
你这个在模态框的蒙层用的很多,你这个操作的实现原理是这样的,你这个绿色框的下面应该有一个满屏的蒙层,也就是这个蒙层的z-index
是小于绿色框的,你判断蒙层的点击事件,触发了蒙层的点击事件之后,绿色框和蒙层一起消失就可以了。
$(document).click()
需要判断一下,如果点击在绿色区域内阻止冒泡