如何在div外單擊鼠標時隱藏div

Question

我有一個HTML div，我想在用戶單擊div外部任何地方的頁面時隱藏它。點擊哪個元素應該觸發onclick事件？

Answer 1

假設你正在使用最新的jQuery，V1.4.4：

$(<the div you want hidden>).click(false); //stop click event from bubbling up to the document 
$(document).one('click', function(){ 
    $(<the div you want hidden>).hide(); //which will hide the div 
}); 

換句話說，這個代碼表示「隱藏的div如果你點擊這個網頁上，除非你點擊DIV」。

回覆：切換按鈕

那麼你就必須是這樣的：

$('button').click(function(){ 
    $('div').toggle(); 
}); 
$('div').click(false); 
$(document).click(function(){ 
    $('div').hide(); 
    //reset the toggle state, e.g. 
    $('button').removeClass('selected'); 
}); 

Answer 2

BODY元素。

Answer 3

$('#mydiv').click(function(e) { e.stopImmediatePropagation(); }); 
$(document.body).one("click", function() { 
    $('#mydiv').hide(); 
}); 

由於mydiv也是body元素的孩子，你不希望這個元素上點擊時，該元素將dissappear。
所以當人們點擊mydiv時，你希望它不要冒泡到body元素，這就是爲什麼你首先在你的mydiv上註冊一個點擊事件，並告訴它停止冒泡。