在页面的其他地方（不是特定的div上）点击鼠标

Question

当用户点击页面除弹出框区域以外的任何地方，我想关闭页面上的一个小弹出框。如何找到它？

- coure2011

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 节点。我首先检查该元素的 ID 是否不是我们要查找的元素。

第二个检查 !$.contains($box[0], e.target) 确保 调用的 DOM 节点 不在我们想要隐藏的元素内部。

好了，我想现在是插件时间了！：

(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/

- jAndy

---

@jmar777：没错，我修复了那个:p。我还添加了一个.unbind()..好吧，我想这可以在几个地方进行优化。也许使用.delegate()是个好主意。谁需要Ben Alman？:)开玩笑 - jAndy

@jAndy - 使用“self”来应用是个好主意。这样做可以保持与其他事件注册方法的一致性。对于“外部”条件，也许（e.target !== self）比检查ID更好，因为这样可以在没有ID的情况下工作。 - jmar777

我不理解这一行代码：if(!self.parentNode) $(document.body).unbind(ename, tempo); - Toskan

啊，我明白了 - 因为你移除了元素，所以你要检查是否可以解绑事件处理程序。最终你应该将其参数化。 - Toskan

当删除 (function($){ .. }(jQuery)); 并添加到 $(document).ready(function() { 中时，运行正常。 - user956584

Answer 2

@jAndy的解决方案很好，但我也想提一下Ben Alman的“外部事件”插件。以下是使用它的快速示例：

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

- jmar777

Answer 3

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

- Alexander_F

Answer 4

获取全局点击事件，或在弹出框下方设置透明的100%/100%的div，并带有该事件。

- Thinker