Javascript 单击时隐藏DIV

我已经读了很多关于这个问题的答案，但没有一个是我所需要的。我有一个

div

按钮，单击该按钮时会显示一个名为

#settingswindow

的

div

。我想能够关闭它时，我点击了

下面的代码就是这样做的，但是当我点击它时，

#settingswindow

div

也会关闭，这是一种不希望出现的效果

// settings button
$(document).ready(function(){
  $("#settings").click(function(event){
    event.stopPropagation();
  $("#settingswindow").toggle();
 });});
$(function(){
$(document).click(function(){
    $('#settingswindow').hide();
});
});

谢谢您的帮助。

为$（“#setingswindow”）创建一个函数。单击（），然后使用event.stopPropagation（）

---

要停止事件冒泡。

您应该做的是将DIV的tabindex属性设置为-1 因此，焦点事件适用于您的div：

<div id="settingswindow" tabindex="-1"></div>

$('#settingswindow').focusout(function() {
    $('#settingswindow').hide();
});

以下是一个工作示例：

添加此行：

$("#settingswindow").click(function(e){
    e.stopPropagation();
});

---

这个Plunker演示了event.stopProgagation（）的用法：不幸的是，它不起作用。你有没有可能在一个小型的JSFIDLE snipet中展示它。再次感谢您的努力。我确实使用了event.stopPropagation（），它做了它应该做的事情，并允许我打开DIV，而不是执行.hide（）效果的主体。问题是当我点击div时。。。它隐藏了，这是一个设置窗口，意味着你不能进行任何设置更改。你介意给你的代码添加一点解释吗，这样我就可以理解为什么事情会这样发生？感谢虽然这是公认的答案，但请注意，不建议使用stopPropagation（）。看这里@Kevin在链接的css技巧文章中同时使用这两个示例或

stopPropagation

是个坏主意。实现此效果的最佳方法是使容器可聚焦并绑定到

blur

事件。我有时间时会更新这个答案。@Derek朕會功夫 这不是个好主意。这意味着当用户切换到另一个选项卡或窗口，或关注模式中的输入时，模式将关闭。此外，“单击”事件会在鼠标向上时触发，而“focusout”事件会在您按下鼠标时触发。通常，只有当您按下鼠标按钮然后松开时，按钮才会执行操作。