链接事件侦听器返回子元素答案

【问题标题】：Link event listener returning child element链接事件侦听器返回子元素
【发布时间】：2019-05-25 11:28:58
【问题描述】：

我可能错过了一些明显的东西。我最近转移到使用 Vanila JS 表单 Jquery，但我无法破解的一件事是..

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

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

您的帮助将不胜感激

<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

【问题讨论】：

标签： javascript

【解决方案1】：

点击事件的事件监听器不将元素作为参数传递。它传递一个event-object 作为它的参数。该事件对象内部是在target-property 下触发事件的元素。如果你想要事件绑定的元素，你可以使用currentTarget-property。

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>

【讨论】：

谢谢您，我正在尝试返回#click-me 元素的 ID，我将如何按照您的示例执行此操作？
event.target 将返回发生点击的元素。在这种情况下，它将返回跨度而不是锚点。
请再次尝试我的答案中的示例。我刚刚更新了帖子，它应该向您展示差异以及如何实现您的目标。
请用正确的o/p检查我已经添加的答案

【解决方案2】：

使用下面的 JS。它会起作用的。

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

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

【讨论】：

【解决方案3】：

首先，您没有将事件附加到锚元素上。传递的el 指的是当前的事件而不是元素，您可以引用this 对象来定位正在生成事件的元素：

请注意：您可以使用Event.stopPropagation() 来防止在冒泡阶段进一步传播。

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

test.addEventListener('click', function(el){
  //el.stopPropagation();
  console.log(this.id);
})

<a href="#" id="click-me">Link
  <br><span class="child-span">Element</span>
</a>

【讨论】：