当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或类,或任何其他传统标识符.我所知道的是,将会有一个锚点击,我需要得到它的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);
};

如果你想坚持使用文档范围的点击处理程序,那么你可以向上爬行以确定点击的东西是否包含在链接中,如下所示:

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

IE/EDGE兼容性警告^{03. 2015.}(并且仍然在^{02. 2017.})

而不是循环DOM中的所有锚点,从event.target元素中查找:

这是一个JS 实验选择器 .closest()^{MDN Docs}

document.addEventListener('click', function (event) {
  event.preventDefault();                     // Don't navigate!
  var anchor = event.target.closest("a");     // Find closest Anchor (or self)
  console.log( anchor.getAttribute('href'));  // Log to test
}, true);

<a href="http://stackoverflow.com/a/29223576/383904">
  <span>
      <img src="//placehold.it/200x60?text=Click+me">  
  </span>
</a>

<a href="http://stackoverflow.com/a/29223576/383904">
  Or click me
</a>

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

最近或自我(找到最近的父母......别的 - 瞄准我!)

在上面的例子中更好地描述.