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

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

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是接收click event的DOM node 。 我先检查那个元素的ID是不是我们要找的那个。

第二次检查!$.contains($box[0], e.target)确保DOM node of invocation的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/

Answer 2

@ jAndy的解决方案很好，但我想提一下Ben Alman的“Outside Events”插件 。 这是一个使用它的快速示例：

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

Answer 3

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

Answer 4

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