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

Question

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

Answer 1

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

由於mydiv也是body元素的子元素，因此當您單擊該元素時，您不希望該元素消失。
因此，當人們點擊mydiv ，你希望它停止冒泡到body元素，這就是為什么首先你在你的mydiv上注冊一個click事件，並告訴它停止冒泡。

Answer 2

假設您使用的是最新的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'。

Re：切換按鈕

然后你會有類似的東西：

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

Answer 3

BODY元素。