JavaScript PreventDefault 影响子进程

Question

我正在编写一个小脚本，当单击菜单项时，它基本上会切换子菜单。

我设法让它工作，但我有一个问题，我使用 PreventDefault 来实现该功能，因此当单击父链接时，会显示子菜单。

问题是，preventDefault 也会影响子菜单，并且子菜单链接也是不可点击的。

该网站是用 WordPress 构建的，因此我无法修改 HTML。这是代码

HTML:

<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-60 current_page_item menu-item-has-children menu-item-69"><a href="#" aria-current="page">UNTERNEHMEN</a>
<ul class="sub-menu">
    <li id="menu-item-316" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-316"><a href="/blog">AKTUELLES</a></li>
    <li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265"><a href="#">KARRIERE</a></li>
    <li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-293"><a href="#">KOOPERATIONEN</a>
    <ul class="sub-menu">
        <li id="menu-item-298" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-298"><a href="#">LINKS</a></li>
    </ul>
</li>

JS:

document.getElementById("menu-item-69").addEventListener("click", function(event){
    event.preventDefault();
    var x = document.getElementById("menu-item-69");
    x.onclick = function(){
        var y = document.getElementById("menu-item-69").querySelectorAll(".sub-menu");
        y[0].style.display = ((y[0].style.display!='block') ? 'block' : 'none')
    };
})

Answer 1

使用事件委托(delegate)是最好的选择，而不是绑定(bind)大量的事件处理程序

// reference the outer element of the menu
document.querySelector('.menu')
  // bind click event to it
  .addEventListener("click", function(event) {
    //get the li where the click was located in
    var li = event.target.closest("li")
    // see if there is a submenu inside of the li
    var submenu = li.querySelector("ul")
    if (submenu) {
      // if there is, stop the event
      event.preventDefault()
      // toggle the class to show and hide the sub menu
      submenu.classList.toggle("active")
    }
  })

.sub-menu {
  display: none
}

.sub-menu.active {
  display: block
}

<ul class="menu">
  <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-60 current_page_item menu-item-has-children menu-item-69"><a href="#" aria-current="page">UNTERNEHMEN</a>
    <ul class="sub-menu">
      <li id="menu-item-316" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-316"><a href="/blog">AKTUELLES</a></li>
      <li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265"><a href="#">KARRIERE</a></li>
      <li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-293"><a href="#">KOOPERATIONEN</a>
        <ul class="sub-menu">
          <li id="menu-item-298" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-298"><a href="#">LINKS</a></li>
        </ul>
      </li>
    </ul>

如果您确实想按自己的方式处理大量事件，则需要检查以确保当前目标是当前链接。

var clickedLink = event.currentTarget.closest("a")
if (clickedLink === this) { event.preventDefault(); }