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

【问题标题】：mouse click somewhere else on page (not on a specific div)鼠标单击页面上的其他位置（而不是特定的 div）
【发布时间】：2010-08-11 17:37:58
【问题描述】：

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

【问题讨论】：

标签： javascript jquery

【解决方案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 是收到click event 的DOM node。我首先检查该元素的 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));

概要

$('#container').outside('click', function(e){
    $(this).remove();
});

示例：

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

【讨论】：

这是一个很好的解决方案——不过只有两个快速的 cmets。在点击处理程序之外缓存 $box var 以避免重新查询（尽管是一个廉价的查询）可能是有意义的。如果您使用的是 jQuery 的 1.3.2+ 版本， !$(e.target).closest('#little-pop-up-box-id').length 会使条件更简洁。 /挑剔
啊啊啊啊！！ TEH CHAIN - 它坏了！（否则......甜度，+1）。另外...应该用 ename var 替换“click”文字吗？
@jmar777：对，已修复：p。我还添加了一个.unbind().. 我想这可以在几个地方进行优化。使用.delegate() 甚至是一个好主意。谁他妈的需要本·阿尔曼？ :) j/k
@jAndy - 很好地呼吁使用“自我”进行申请。绝对与其他事件注册方法保持一致。对于“外部”条件，也许 (e.target !== self) 会比检查 ID 更好，因为当 ID 不存在时这将起作用。
@jmar777：不错，改了。

【解决方案2】：

@jAndy 的解决方案很好，但我也想提一下Ben Alman's "Outside Events" plugin。这是一个使用它的简单示例：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：