当鼠标在 div 外面点击时如何隐藏该 div

Question

我有一个HTML div，希望在用户单击div外的页面任何位置时隐藏它。我应该在哪个元素上触发onclick事件？

- ptamzz

Answer 1

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

由于mydiv也是body元素的子元素，因此您不希望单击该元素时使元素消失。
因此，当人们单击mydiv时，您希望它停止冒泡到body元素，这就是为什么首先在mydiv上注册一个单击事件，并告诉它停止冒泡。

- Gideon

---

哦，.one() 接受一个 eventType 作为参数。在这里，你绑定的是哪个事件？ - Han Seoul-Oh

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本身”。

关于切换按钮：

然后你会得到类似这样的东西：

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

- Han Seoul-Oh

---

我有一个切换按钮。切换后将显示和隐藏div。除此之外，我希望在单击div外的任何地方时隐藏div。我正在尝试创建类似于twitter.com上Twitter“登录”按钮的东西。 - ptamzz

你能帮我重置切换状态吗？假设我点击了一个元素，在我点击另一个元素时，它应该将切换状态重置为初始状态。谢谢 :) - ptamzz

我不确定你的意思，但我标记了重置切换状态的适当位置。 - Han Seoul-Oh

Answer 3

身体元素。

- Bitsplitter