鼠标单击页面上的其他位置（而不是特定的div）

Question

当用户点击页面上除框区域以外的任何位置时，我想在页面中关闭一个小弹出框。怎么找到它？

Answer 1

$(document.body).click(function(e){
   var $box = $('#little-pop-up-box-id');
   if(e.target.id !== 'little-pop-up-box-id' && !$.contains($box[0], e.target))
      $box.remove();
});

e.target是收到DOM node的{​​{1}}。我首先检查该元素的click event是否不是我们正在寻找的那个。

第二次检查ID确保我们要隐藏的元素中的!$.contains($box[0], e.target) 。

嗯，我猜这是插件时间！ ：

DOM node of invocation

<强>概要

(function($){
   $.fn.outside = function(ename, cb){
      return this.each(function(){
         var $this = $(this),
              self = this;
         $(document.body).bind(ename, function tempo(e){
             if(e.target !== self && !$.contains(self, e.target)){
                cb.apply(self, [e]);
                if(!self.parentNode) $(document.body).unbind(ename, tempo);
             }
         });
      });
   };
}(jQuery));

示例：

http://www.jsfiddle.net/qbDKN/30/

Answer 2

@ jAndy的解决方案很好，但我也想提到Ben Alman's "Outside Events" plugin。以下是使用它的快速示例：

$("#popup").bind("clickoutside", function(event){
  $(this).hide();
});

Answer 3

抓取全局点击事件，或在此弹出框下设置透明div 100％/ 100％。

Answer 4

$("html").click(function(){
//close popup
});