javascript - 返回子元素的链接事件监听器

Question

我可能遗漏了一些明显的东西。我最近转而使用 Vanila JS 形式的 Jquery，但我无法破解的一件事是..

当我将事件监听器添加到包含子元素的链接时，事件返回子元素而不是链接元素本身。

我已经尝试了很多不同的解决方案，并且可以阻止在子元素上添加指针事件:无，但是我需要不同的解决方案。

您的帮助将不胜感激

<a href="#" id="click-me" id="2">
<span class="child-span"></span>
</a>

let test  = document.getElementById('click-me')

test.addEventListener('click',function(el){
el.preventDefault()
console.log(el.target)
})

这会返回 span 元素，但我正在尝试返回 #click-me id

Answer 1

点击事件的事件监听器不传递元素作为参数。它传递一个事件对象作为其参数。该事件对象内部是在 target 属性下触发事件的元素。如果您想要事件绑定(bind)到的元素，可以使用 currentTarget 属性。

let testElement = document.getElementById('click-me')
testElement.addEventListener('click', function(event){
  event.preventDefault();
  console.log('Someone clicked the element!');
  console.log(event.target);
  console.log(event.currentTarget);
});

#click-me {
  background-color: #cff;
}

#click-me .child-span {
  background-color: #f99;
}

<a href="#" id="click-me" id="2">
  <span class="child-span">CLICK ME!</span>
  <span class="child-span">No, please click me!</span>
  ... or maybe me?
</a>