时间戳

首页 > 解决方案 > javascript - 点击事件目标排除孩子

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

问题描述

我尝试制作带有子菜单的菜单。如何排除子项目的点击事件？在我的片段中，当我单击子项时。父.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>

标签： javascripthtml

解决方案

您只需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>

推荐阅读