如何捕获除某个区域以外的事件点击事件？

Question

当点击绿色区域以外的页面时，隐藏绿色区域？这个用jquery怎么写？

Answer 1

首先可以给 document 对象绑定 click 事件。
然后由于事件冒泡机制，你单击文档的任意地方（包括绿色区域）都会触发 click 事件。

先在事件里写上隐藏绿色区域的代码

$(document).on('click',function(e){
    $('#aaa').hide();
});

然后，再给绿色区域绑定click事件，这时候阻止事件冒泡，这样一来，点击绿色区域的话，是不会隐藏掉自己的。

$('#aaa').on('click',function(e){
    e.stopPropagation();
});

Answer 2

@我是好人的回答没有问题，但是需要绑定两次事件。个人觉得不是太好。

原生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();
  }
});

Answer 3

$(document).click()

需要判断一下，如果点击在绿色区域内阻止冒泡

Answer 4

你这个在模态框的蒙层用的很多，你这个操作的实现原理是这样的，你这个绿色框的下面应该有一个满屏的蒙层，也就是这个蒙层的z-index是小于绿色框的，你判断蒙层的点击事件，触发了蒙层的点击事件之后，绿色框和蒙层一起消失就可以了。