检查是否单击任何子元素

check for click on any child element

本文关键字：元素 任何 单击 是否 检查      更新时间：2023-09-26

我想提交一个表单与JavaScript一旦任何子元素的特定无序列表被点击。

代码可能看起来像这样，但是列表项的数量可能会变得很长。

<ul id="myList">
 <li id="myListItem1">list item 1</li>
 <li id="myListItem2">list item 2</li> 
 <li id="myListItem3">list item 3</li>
</ul>

不可能在每个li中添加一个onclick。此外，我可能无法将代码附加到ul标签，所以如果有可能在不将代码附加到ul标签的情况下解决，那将是最好的。不幸的是，像jquery、mootools等库可能不会被使用。UL的id将始终是已知的和静态的，但LI的id将是未知的，因为它们的数量可能不同。

您可以使用如下代码轻松地做到这一点:

var childNodeArray = document.getElementById('myList').childNodes;

这将给你一个元素数组，你可以添加点击监听器，例如

for(var node in childNodeArray){
    node.onclick = function () { alert('here'); };
}

答案已经存在:

如何从.childNodes方法返回的集合中获取元素

如何钩到页面宽点击事件?

正确绑定javascript事件

您还可以使用事件委托，而不是像nimmonet的回答中建议的那样为每个单独的<li>附加侦听器:

将单个事件监听器附加到父对象(本例中为<ul>)，然后检查event.target的属性(即被点击的东西)，以查看需要采取什么行动。

document.getElementById('myList')
  .addEventListener('click', (event) => {
    if (event.target.nodeName.toLowerCase() === 'li') {
      console.log(event.target.textContent + ' clicked');
    }
  });
<ul id="myList">
 <li id="myListItem1">list item 1</li>
 <li id="myListItem2">list item 2</li> 
 <li id="myListItem3">list item 3</li>
</ul>

相关文章：