Question

我正在尝试使用＆amp;学习简单的Javascript（没有JQuery /其他库/框架）。

HTML：

<div id="name">text</div>
<ul id="namelist"><li>A </li><li>B </li><li>C </li></ul>

我编写了以下用于点击的事件委托代码，它适用于A，B，C子元素点击处理。

JS：

<!--
var mainlist = document.getElementById("namelist");
var namefield=document.getElementById("name");
mainlist.addEventListener('click',function(event) {
    console.log(event.currentTarget.id);
    namefield.innerHTML=event.target.innerHTML;
                  console.log( event.target.innerHTML);});-->

然而，当我点击＆＃34; ul＆＃34;元素而不是子li元素，我看到所有ABC都打印到div。我不想要对ul采取任何行动。有什么建议吗？

Answer 1

简答

var mainlist = document.getElementById("namelist");
var namefield = document.getElementById("name");
mainlist.addEventListener('click', function(event) {
  if(event.target && event.target.nodeName == "LI") {
        console.log(event.currentTarget.id);
        namefield.innerHTML=event.target.innerHTML;
        console.log( event.target.innerHTML);
    }
});

长答案

我认为你的问题应该是，当我点击li时，为什么ul的事件监听器会被触发。

当您点击li时，ul也会像点击一样。它在javascript中称为事件冒泡，默认情况下，当您注册addEventListener时没有第三个参数（默认为false）。

了解更多here

我建议在两个元素上添加事件监听器，然后了解事件委托模型。

Answer 2

只需在点击处理程序中添加一项检查

mainlist.addEventListener('click',function(event) {
    if (event.currentTarget != event.target) {
        console.log(event.currentTarget.id);
        namefield.innerHTML=event.target.innerHTML;
        console.log( event.target.innerHTML);
    }

   });

事件委派 - 父元素目标而不是子元素

2 个答案: