chuột bấm vào một nơi nào đó khác trên trang (không phải trên một div cụ thể)

Question

Tôi muốn đóng một hộp bật lên nhỏ trong trang khi người dùng đã nhấp vào bất kỳ đâu trên trang ngoài vùng hộp. làm thế nào để tìm thấy nó?

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 là DOM node quan tiếp nhận click event. Tôi đang kiểm tra trước tiên nếu ID của phần tử đó là không phải là mà chúng tôi đang tìm kiếm.

Séc thứ hai !$.contains($box[0], e.target) đảm bảo rằng DOM node of invocation không phải là trong phần phần tử chúng tôi muốn ẩn.

Vâng, tôi đoán đó là thời gian của plugin! :

(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)); 

tóm tắt

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

Ví dụ:

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

Answer 2

Grab toàn cầu sự kiện nhấp chuột, hoặc thiết lập div minh bạch 100%/100% theo các cửa sổ pop-up hộp với sự kiện như vậy.

Answer 3

giải pháp @ jAndy là tốt, nhưng tôi cũng muốn đề cập đến Ben Alman's "Outside Events" plugin. Dưới đây là một ví dụ nhanh sử dụng nó:

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

Answer 4

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