javascript - 点击事件目标排除子项

Question

这个问题已经有答案了:

avoid closing the menu if submenu items is clicked (3 个回答)

已关闭 3 年前。

我尝试制作一个带有子菜单的菜单。如何排除子项目的点击事件？在我的代码片段中，当我单击子项目时。父级已删除 .open类。

var menu = document.querySelectorAll('#menu > li')
if (menu.length) {
  for (var i = 0; i < menu.length; i++) {
    if (menu[i].classList.contains('has-sub')) {
      menu[i].addEventListener('click', function(event) {
          event.currentTarget.classList.toggle('open')
      })
    }
  }
}

.sub-menu { display: none }
.has-sub.open .sub-menu { display: block }

<ul id="menu">
  <li class="has-sub">
    <a href="#">Sub-memu</a>
    <ul class="sub-menu">
      <li><a href="#">Item</a></li>
    </ul>
  </li>
</ul>

Answer 1

您只需调用 event.stopPropagation从子菜单中。

var menu = document.querySelectorAll('#menu > li')
if (menu.length) {
  for (var i = 0; i < menu.length; i++) {
    if (menu[i].classList.contains('has-sub')) {
      menu[i].addEventListener('click', function(event) {
          event.currentTarget.classList.toggle('open')
      })
    }
  }
}
// this is the important part
var submenus = document.querySelectorAll(".sub-menu");
for (var i = 0; i < submenus.length; i ++) {
  submenus[i].addEventListener("click", function (event) {
    event.stopPropagation();
  });
}

.sub-menu { display: none }
.has-sub.open .sub-menu { display: block }

<ul id="menu">
  <li class="has-sub">
    <a href="#">Sub-memu</a>
    <ul class="sub-menu">
      <li><a href="#">Item</a></li>
    </ul>
  </li>
</ul>