事件委派，如何定位div中的特定范围

Question

给定一堆这样的div：

<div class="itemGrid">
    <div id="itemOne" class="fruit">
       <span> Banana </span>
          🍌
        </div>

     <div id="itemTwo" class="fruit">
        <span> Apple </span>
          🍎
      </div>
</div>

我希望能够使用事件委托来在单击这些div时获取跨度的值（因此只是文本）。

这样我就可以得到所有内容，文本和符号，但是我似乎无法仅将文本包含在范围内：

const fruitButtons = document.querySelectorAll(".fruit span");
const grid = document.querySelector(".itemGrid");

grid.addEventListener("click", function(e) {
  if (e.target.nodeName == "DIV") {
    console.log(e.target.textContent)
  }
})

Answer 1

您的代码不是正确的event delegation

您应该检查是否在div内单击class=fruit 。 然后，您可以从其span子孙中提取text 。

grid.addEventListener("click", function(e) {
    let node = e.target;
    let div = null;

    // first let's check if we clicked inside div with class fruit by going up the DOM tree
    while(node !== this){
        if(node.hasClass("fruit")){
            div = node;
            break;
        }

        node = node.parentNode;
    }

    // if we clicked inside, log the value of span
    if(div !== null){
        console.log(div.querySelector("span").textContent);
    }
});

Answer 2

使用getElementsByTagName（）查找目标下的span元素。

编辑：

正如所指出的那样，人们可以解释一个隐含的要求，即用户应该能够单击span元素并记录该元素的内容。 通过添加while循环来搜索祖先链，添加了对此的支持：

//search ancestors for div in case user clicks on span element
while (target.nodeName !== "DIV" && e.target.parentNode !== null) {
    target = e.target.parentNode;
}

 const fruitButtons = document.querySelectorAll(".fruit span"); const grid = document.querySelector(".itemGrid"); grid.addEventListener("click", function(e) { var target = e.target; //search ancestors for div in case user clicks on span element while (target.nodeName !== "DIV" && e.target.parentNode !== null) { target = e.target.parentNode; } if (target.nodeName == "DIV") { var spans = target.getElementsByTagName('span'); if (spans.length) { console.log(spans[0].textContent); } } }) 

 <div class="itemGrid"> <div id="itemOne" class="fruit"> <span> Banana </span> 🍌 </div> <div id="itemTwo" class="fruit"> <span> Apple </span> 🍎 </div> </div> 

Answer 3

稍微修改场景：

 const fruitButtons = document.querySelectorAll(".fruit > span"); const gridItems = document.querySelectorAll(".fruit"); // Loop through the div.fruit elements: gridItems.forEach(function(div){ // Wire each div.fruit to a click handler: div.addEventListener("click", function(e){ // When clicked, look for the first span within the div and get its text console.log(div.querySelector("span").textContent); }); }); 

 <div class="itemGrid"> <div id="itemOne" class="fruit"> <span> Banana </span> 🍌 </div> <div id="itemTwo" class="fruit"> <span> Apple </span> 🍎 </div> </div>