Question

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

我想出了上一个问题，这让我想到了这个问题：

＆＃13;

$(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;
    }
  });

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

要解释我尝试做什么 - 如果第一个if窗口中的事件目标点击事件不是按钮并且对话框正在显示，那么将其删除（预期的功能） - 我现在需要如果它被点击进去，请保持打开状态。

我的尝试就是这件事：

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

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

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

Answer 1

您需要阻止事件冒泡到父元素（将按预期关闭模式）。您可以使用以下代码执行此操作：

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

尽管点击它仍保持模态打开

1 个答案: