单击子元素时捕获 event.target 的正确方法

Question

我想在单击锚点时调用 javascript 函数并捕获元素的 href 和标题属性。如果元素的内容是纯文本，我的代码工作正常，但是当我在锚标记内引入新元素（例如标签和图标）时，e.target 现在是标签或图标，因此我无法再获取 href 属性。

我可以编写一些代码来检查元素类型，如果它不是锚，则查找父元素，但我想知道是否有更好的方法让我的函数从 event.target 获取锚元素，即使单击了子元素？

function doStuff(e) {

  console.log(e.target.getAttribute("href"));

  console.log(e.target.getAttribute("title"));

  e.preventDefault();

}

<a href="/bob" title="Bob" onClick="doStuff(event)">

  <i class='fa fa-user'></i>

  <label>Bob</label>

</a>

Answer 1

您可以使用event.currentTarget，它应该为您提供绑定事件的锚元素

Answer 2

单击子/子元素时，您可以通过 : 获取对父元素的引用event.target.offsetParent。