javascript - 使用 eventListener 捕获对所有 A 标签的点击

Question

我正在尝试提出一个解决方案，让我知道何时单击“A”标签(或“A”标签内的任何其他标签)。

例如:

<a href="#">Link 1</a>
<a href="#"><span>Link 2</span></a>
<a href="#"><img src="#">Link 3</img></a>

到目前为止我有这个:

<script>
document.getElementsByTagName("BODY")[0].addEventListener('click', function(e) {
if(e.target && e.target.tagName == "A") {
console.log(e.target.text); }
}, false);
</script>

这将返回链接 1 的文本，但不返回链接 2 和 3 的文本。如果有人单击没有 anchor 标记的 span 或 img 元素，我也不想获得任何文本。

Answer 1

旧版浏览器

.target返回被点击的元素。对于链接 2，这将始终是 span 标记；在链接 3 的正确格式版本上，有时它是 a 标记，有时它是 img 标记，具体取决于您单击的位置。为了弄清楚 .target 是否在 a 标签内，您需要使用 parentNode 爬上 DOM 树。直到到达 a 节点或文档本身，它的 .parentNode 为 null。

var getParentAnchor = function (element) {
  while (element !== null) {
    if (element.tagName && element.tagName.toUpperCase() === "A") {
      return element;
    }
    element = element.parentNode;
  }
  return null;
};

document.querySelector("body").addEventListener('click', function(e) {
  var anchor = getParentAnchor(e.target);
  if(anchor !== null) {
    console.log(anchor.textContent);
  }
}, false);

<a href="#">Link 1</a>
<a href="#"><span>Link 2</span></a>
<a href="#"><img src="example.jpg">Link 3</a>
<div>
Non link text
</div>

标准.textContent应该优先于 .text。

使用起来更容易querySelector抓取正文，除非你需要支持 IE7 或更低版本。

现代浏览器

如果不需要支持older browsers like IE or Opera mini ，可以使用 Element.closest 简化代码方法。您可以完全摆脱 getParentAnchor 并将其替换为单个 .closest 调用，从而大大缩短代码:

document.querySelector("body").addEventListener('click', function(e) {
  var anchor = e.target.closest('a');
  if(anchor !== null) {
    console.log(anchor.textContent);
  }
}, false);

<a href="#">Link 1</a>
<a href="#"><span>Link 2</span></a>
<a href="#"><img src="example.jpg">Link 3</a>
<div>
Non link text
</div>