純 JS - addEventListener“mouseup”與切換可見性按鈕沖突

Question

我遇到了addEventListener和“mouseup”事件的問題，這個事件的目的是每當有任何點擊在 DIV 容器Container_CLASS之外時，它將被強制隱藏。

但是有一個Checkbox List (Toggle)按鈕，因為默認情況下Container_ID總是隱藏。

當顯示Container_ID時，問題就開始了（通過單擊Checkbox List (Toggle) ），即使Toggle_Visibility function 被回調以采取行動，這也會過度保持Container_ID處於打開狀態。 這一切都是因為兩個函數之間存在指令沖突。

如何使addEventListener在單擊Checkbox List (Toggle)時忽略該指令？

 window.addEventListener("mouseup", function (event) { let container = document.querySelectorAll(".Container_CLASS"); container.forEach((theDiv) => { if (event.target.closest(".Container_CLASS") === null) { theDiv.style.display = "none"; } }); }); function Toggle_Visibility(elmId) { var vDivDisplay = document.getElementById(elmId); vDivDisplay.style.display = (vDivDisplay.style.display === 'none')? 'block': 'none'; }

 div.Container_CLASS { font-size: 10px; background-color: #FFFFFF; width: 50%; height: 350px; margin-top: 4px; margin-left: 4px; padding-left: 0px; display: none; position: absolute; overflow-y: scroll; border: 1px solid #666666; }

 <a href="#" class="Toggle_Visibility_CLASS" id="Toogle_Visibility_ID" onclick="Toggle_Visibility('Container_ID');">Checkbox List (Toggle)</a> <div class="Container_CLASS" id="Container_ID"> <div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset All</a></div> <ul> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li> </ul> <br> <p><b>** CLICK IN ANY PART OUTSIDE TO CLOSE THIS DIV CONTAINER</b></p> <br> <p><b>** BUT IF YOU CLICK ON `Checkbox List (Toggle)` WONT CLOSE</b></p> </div>

Answer 1

解決方案

if (event.target.closest(".Container_CLASS") === null && event.target.id !== "Toogle_Visibility_ID") { theDiv.style.display = "none"; }