时间戳

首页 > 解决方案 > Javascript event.target 找不到孩子。NodeList 和 HTMLChildren 为空

javascript - Javascript event.target 找不到孩子。NodeList 和 HTMLChildren 为空

问题描述

我正在尝试使用 Vanilla JavaScript 构建带有子菜单的菜单

HTML 看起来像这样：

<ul id="menu">
   <li>
      <ul>
         <li>Sub menu item 1</li>
         <li>
              <ul>
                 <li>Sub menu of a submenu item 1</li>
                 <li>Sub menu of a submenu item 2</li>
            </ul>
         </li>
      </ul>
   </li>
   <li>
      <ul>
         <li>Sub menu item 1</li>
         <li>Sub menu item 2</li>
      </ul>
   </li>
</ul>

Javascript 看起来像：

   var clickHandler = function(event){
      
        event.preventDefault();
         
        if(event.target.tagName != 'LI') return;

        //when I click on the **li** which has a **ul**, it returns empty node list
        console.log(event.target.querySelectorAll('ul')); //returns empty NodeList
    } 

    document.addEventListener('DOMContentLoaded', function()
    {
        var menu = document.getElementById('menu');
        //console.log(menu)
        menu.addEventListener('click', clickHandler, false);
    });

为什么 event.target.querySelectorAll('ul') 返回空节点列表

请注意，我将点击事件放在#menu而不是#menu > li的原因是因为我不想使用循环在每个 LI 中附加事件处理程序

准确地说，当单击任何li时，我想检查它是否有子菜单（ul），如果有，那么我将向单击的 'li' 添加一个类 'open'。我不在乎li的位置，我只想知道它是否包含ul。

在 JQuery 中，它应该类似于 .find('ul');

标签： javascripthtml

解决方案

我不明白你为什么把这个弄得这么复杂。如果出于任何原因需要，请告诉我们。

let allLi = document.querySelectorAll("ul:not(#menu) li");
[...allLi].forEach(li => {
 li.addEventListener("click", callThisFunction) 
});

function callThisFunction() {
  console.log(event.target.innerText)
}

编辑：在下面评论中的解释之后，我做了以下更改：

let allLi = document.querySelectorAll("li");
[...allLi].forEach(li => {
 let method = li.querySelector("ul") ? function1 : function2;
 li.addEventListener("click", method) 
});

function function1() {
  event.stopPropagation();
  console.log(event.target.innerHMTL)
}
function function2() {
  event.stopPropagation();
  console.log(event.target.innerHTML)
}

推荐阅读