javascript - 尽管点击了模态框仍保持打开状态

Question

我正在尝试让切换模式即使在单击时也保持打开状态。它内部也有多个元素，如果单击其中一个元素，它仍然需要保持打开状态。我问了一个关于点击事件和 event.target 的类似问题:close modal on click on body这是在此基础上构建的。

我弄清楚了上一个问题，这给我留下了这个:

$(function(e) {

  $("#filter-button").click(function(e) {
    $(".dialog").toggleClass("show");
  });

  $(window).click(function(e) {
    if((e.target.tagName.toLowerCase() != 'button') && ($(".dialog").hasClass("show"))) {
    	$(".dialog").removeClass("show");
  	} else if (e.target.className.toLowerCase() == 'dialog') {
      return false;
    }
  });

});

.dialog {
  display: none;
  width: 300px;
  height: 300px;
  background-color: red;
}

.show {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="filter-button">SHOW/HIDE</button>

<div class="dialog">
  <h1>Hi</h1>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

为了解释我想要做什么 - 如果窗口中单击事件中的第一个事件目标不是按钮并且显示对话框，则将其删除(预期功能) - 我现在需要保留它如果在内部单击则打开。

我的尝试是这件作品:

...
else if (e.target.className.toLowerCase() == 'dialog') {
      return false;
    }
...

我认为将会发生的是，如果单击 div，它将返回: false; 并保持打开状态，从而防止对话框关闭。但无论如何它都会关闭。我还需要以某种方式定位其中的所有元素。

我现在不确定如何继续前进？我是否需要以某种方式包含对话框中的所有元素？

Answer 1

您需要阻止事件向上冒泡到父元素(这将按预期关闭模式)。您可以使用以下代码来做到这一点:

$('.dialog').click(function(event) {
  event.stopPropagation();
});