如何在div外部单击鼠标时隐藏div

时间:2010-11-29 07:43:00

标签: javascript jquery jquery-ui

我有一个HTML div,我想在用户点击div之外的任何地方时隐藏它。哪个点击哪个元素应该触发onclick事件??

3 个答案:

答案 0 :(得分:6)

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

由于mydiv也是body元素的子元素,因此当您点击该元素时,您不希望该元素消失。
因此,当用户点击mydiv时,您希望它停止冒泡到body元素,这就是为什么首先在mydiv上注册点击事件并告诉它停止鼓泡。

答案 1 :(得分: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”。

Re:切换按钮

然后你会有类似的东西:

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

答案 2 :(得分:0)

BODY元素。