当 event.target 是 HTMLImageElement 时，如何获取锚点的 href？

Question

我想在单击锚元素时获取它的 href。我正在使用以下 javascript 代码：

document.addEventListener('click', function (event)
{
    event = event || window.event;
    var el = event.target || event.srcElement;

    if (el instanceof HTMLAnchorElement)
    {
        console.log(el.getAttribute('href'));
    }
}, true);

这非常适合像这样的嵌入式锚点：

<div><p><a href='link'></a></p><div>

但是当我使用锚点和图像时它不起作用:

<div><a href='link'><img></a></div>

event.target 返回图像而不是锚点。可以使用以下 if 案例修改 javascript 代码以解决此问题：

document.addEventListener('click', function (event)
{
    event = event || window.event;
    var el = event.target || event.srcElement;

    if (el instanceof HTMLImageElement)
    {
        // Using parentNode to get the image element parent - the anchor element.
        console.log(el.parentNode.getAttribute('href'));
    }
    else if (el instanceof HTMLAnchorElement)
    {
        console.log(el.getAttribute('href'));
    }
}, true);

但这看起来不是很优雅，我想知道是否有更好的方法。

！重要！ 注意：请记住，我无权访问 ID 或 class，或与此相关的任何其他传统标识符。我所知道的是，将有一个锚被点击，我需要得到它的 href。我什至不知道它会在哪里，是否存在或稍后创建。

编辑：请不要 jQuery 或其他 javascript 库。

Answer 1

与其添加全局 click 处理程序，为什么不只定位锚标记？

var anchors = document.getElementsByTagName("a");
for (var i = 0, length = anchors.length; i < length; i++) {
  var anchor = anchors[i];
  anchor.addEventListener('click', function() {
    // `this` refers to the anchor tag that's been clicked
    console.log(this.getAttribute('href'));
  }, true);
};

如果您想坚持使用文档范围的 click 处理程序，那么您可以向上爬行以确定单击的内容是否包含在 link 像这样：

document.addEventListener('click', function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;

    while (target) {
      if (target instanceof HTMLAnchorElement) {
        console.log(target.getAttribute('href'));
        break;
      }

      target = target.parentNode;
    }
}, true);

这样至少您可以避免编写必须考虑所有可能类型的锚子和嵌套结构的脆弱代码。

Answer 2

不是循环 DOM 中的所有锚点，而是从 event.target 元素查找。
使用 JavaScript 的 .closest() ^{MDN Docs} (PS: polyfill for IE)

addEventListener('click', function (event) {
  event.preventDefault();                     // Don't navigate!
  const anchor = event.target.closest("a");   // Find closest Anchor (or self)
  if (!anchor) return;                        // Not found. Exit here.
  console.log( anchor.getAttribute('href'));  // Log to test
});

<a href="">
  <span>
      <img src="//placehold.it/200x60?text=Click+me">  
  </span>
</a>

<a href="">
  Or click me
</a>

它基本上像 jQuery 的 .closest() 一样工作

Closest or Self (Find closest parent... else - target me!)

上面的例子描述得更好。

当 event.target 是 HTMLImageElement 时，如何获取锚点的 href？

How to get href of anchor when the event.target is HTMLImageElement?

javascript

anchor

events

href