Question

我可能会错过一些显而易见的东西。我最近转移到使用Vanila JS表单Jquery，而我无法破解的是..

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

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

您的帮助将不胜感激

<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

点击事件的事件监听器不传递元素作为参数。它传递一个event对象作为其参数。在该事件对象内部是触发target属性下的事件的元素。如果您希望事件绑定到该元素，则可以使用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>

Answer 2

使用以下JS。它将起作用。

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

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

Answer 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>

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

3 个答案: