如何在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上注册点击事件并告诉它停止鼓泡。

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元素。