使用纯javascript获取li元素onclick，而不会将onClick应用到每个元素 [英] Get li element onclick with pure javascript without applying onClick to each element

问题描述

首先我不想使用jQuery，只是纯粹的javascript;请不要链接到重复的jQuery帖子。

如果我有一个像

的列表

 < ul id =bulk> 
< li id =one>< / li> 
< li id =bmw>< / li> 
< / ul> 
  

我想获取点击列表元素的id。
我知道我可以为每个元素添加 onClick =，但生产列表中有2000个条目，我认为存在更好的方法。

例如： 元素与 id ='singular'我可以使用下面的javascript来获取点击的ID。

  var li = document.getElementById（'singular'）。onclick = function（）{do something}; 
  

由于成千上万个 li 元素，此代码将无法使用。

我已经能够使用以下javascript获取元素名称列表：

  var bulk = document.getElementById（'bulk'）; 
 var bulkli = tabs.getElementsByTagName（'li'）; 
 // bulkli包含[one，bmw]; 
  

但这并不能告诉我哪个被点击过。

ul ，然后使用 e.target .id 来获取单击元素的 id 。请检查以确保clicked元素实际上是一个 li ，因为您可能无法点击其中一个。

示例

  var ul = document.getElementById（'bulk'）; //父母
 
 ul.addEventListener（'click'，function（e）{
 if（e.target.tagName ==='LI'）{
 alert（e .target.id）; //检查元素是否是LI 
} 
}）; 
  

---

正如评论中指出的那样，当点击 li 的孩子时不起作用。为了解决这个问题，你需要检查clicked元素的父元素是否是click事件的父元素。

例如

  var ul = document.getElementById（'bulk'）; //父
 
 ul.addEventListener（'click'，function（e）{
 var target = e.target; //单击元素
 while（target&& target.parentNode！== ul）{
 target = target.parentNode; //如果被点击的元素不是直接子元素
 if（！target）{return;} //如果元素不是' t存在
 
 if（target.tagName ==='LI'）{
 alert（target.id）; //检查元素是否是LI 
} 
}）; 
  

First of all I do not want to use jQuery, just pure javascript; please don't link to duplicate jQuery posts.

If I have a list like

<ul id="bulk">
    <li id="one"></li>
    <li id="bmw"></li>
</ul>

I want to get the id of the clicked list element. I am aware I could add onClick="" to each element but the production list I have has 2000 entries and I think a better way exists.

For example:

If I had only one li element with id='singular' I could use the following javascript to get the ID clicked.

var li = document.getElementById('singular').onclick = function() { do something };

As there are thousands of li elements, this code won't work.

I have been able to get a list of the element names with the following javascript:

var bulk = document.getElementById('bulk');
var bulkli = tabs.getElementsByTagName('li');
//bulkli contains ["one", "bmw"];

but this does not tell me which one was clicked.

解决方案

You could add an event listener to the parent ul and then use e.target.id to get the id of the clicked element. Just check to make sure that the clicked element is actually an li since it's possible you may not be clicking on one.

Example Here

var ul = document.getElementById('bulk');  // Parent

ul.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI'){
      alert(e.target.id);  // Check if the element is a LI
    }
});

---

As pointed out in the comments, this approach won't work when the child of an li is clicked. To solve this, you would need to check to see if the parent element of the clicked element is the one that the click event is attached to.

Example Here

var ul = document.getElementById('bulk'); // Parent

ul.addEventListener('click', function (e) {
    var target = e.target; // Clicked element
    while (target && target.parentNode !== ul) {
        target = target.parentNode; // If the clicked element isn't a direct child
        if(!target) { return; } // If element doesn't exist
    }
    if (target.tagName === 'LI'){
        alert(target.id); // Check if the element is a LI
    }
});

这篇关于使用纯javascript获取li元素onclick，而不会将onClick应用到每个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！