下拉菜单关闭问题 - Javascript / CSS / Html

Question

如果我在不同的元素上设置相同的event handler和functionality，是否有问题？

我正在尝试显示一个dropdown menu，当我单击它外部时，它应该关闭，哪种方法更好？因为即使我在下拉菜单中选择项目，它仍然会关闭。

当我单击外部时，我不知道如何关闭下拉列表，所以我尝试将两者放在header和body上。但我的结果是if statement有些混乱.

我需要为下拉列表中的每个元素选择be strict equalparentNode元素。

例如：

<div class="dropdown-menu">
<ul>
<li>Some link</li>
<li>Some link</li>
<li>Some link</li>
<li>Some link</li>
</ul>
<ul>
<li>Some link</li>
<li>Some link</li>
<li>Some link</li>
<li>Some link</li>
</ul>
</div>

当我单击link或ul时，它会关闭。我只想要当我在dropdown menu之外点击

// Show dropdown more menu
document.body.addEventListener('click', showMoreMenu);
ui.header.addEventListener('click', showMoreMenu);
// Show dropdown more menu
function showMoreMenu(e) {
ui.showMoreMenu(e);
e.stopPropagation();
}
// Class method
showMoreMenu(e) {
if(e.target === this.more_btn || e.target.parentElement === this.more_btn || e.target.parentNode === this.more_dropdown_menu || e.target === this.more_dropdown_menu || e.target.parentNode.parentElement === this.more_dropdown_menu) {
this.more_dropdown_menu.classList.add('visible');
} else {
this.more_dropdown_menu.classList.remove('visible');
}
}

Answer 1

我认为这就是你需要的：

document.querySelector("body:not(.dropdown-menu)").addEventListener("click", showMoreMenu);

Answer 2

我找到了问题所在，我只需要它来添加.closest(selector)方法。

这里有浏览器支持，在这里我找到了类似的答案。

hideMenu(e) {
if(!e.target.closest('.more-dropdown-menu')) {
this.dropdown_menu.classList.remove('visible')
}
}
window.addEventListener('click', eventOperations);
function eventOperations(e) {
ui.hideMenu(e);
e.stopPropagation();
}