保持模式打開，盡管單擊它

Question

我試圖獲得一種切換模式，即使單擊它也可以保持打開狀態。 它還具有多個元素，如果單擊其中之一，則仍需要保持打開狀態。 我問了一個有關點擊事件和event.target的類似問題： 單擊主體時關閉模式 ，這是基於此的。

我想出了前面的問題，這讓我有了：

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

解釋我要做什么-如果事件目標位於窗口中的第一個if事件中而不是按鈕，並且對話框正在顯示，則將其刪除（預期功能）-我現在需要保持打開狀態（如果它是在里面單擊。

我的嘗試是這樣的：

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

我認為將要發生的是，如果單擊div，它將return: false; 並保持打開狀態，以防止對話框關閉。 但是無論如何它都關閉了。 我還需要以某種方式針對其中的所有元素。

我現在不確定如何前進？ 我是否需要以某種方式將所有元素包括在對話框中？

Answer 1

您需要阻止事件冒泡到父元素（按預期將關閉模式）。 您可以使用以下代碼進行操作：

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