即使在div或img内，也要单击链接

Question

我使用这样的Click侦听器，以便单击链接到link.php将执行一些代码：

document.addEventListener('click', function(e) {    
    var tre = e.target.href || '';
    if( tre.indexOf("link.php") > -1) {
        alert('it worked');
    }
}, false);

这有效：

<a href="/link.php?destination=1" target="_blank">
    link text
</a>

但是点击图片或div不会：

<a href="/link.php?destination=1" target="_blank">
    <img src="/image.jpg">
    <span>link text</span>
</a>

因为点击是在图片和跨度上，而不是<a>标签上。使这项工作最简单的方法是什么？

Answer 1

JavaScript确实有一个本机.closest()方法（尽管目前被认为是实验性的，并且对浏览器的支持有限）。您可以使用此方法来获取最接近的a祖先元素（或元素本身，这意味着它在您提供的两种情况下都可以使用）。

这里的例子

document.addEventListener('click', function(e) {    
    var href = e.target.closest('a').href || '';
    if (href.indexOf("link.php") > -1) {
      // ...
    }
}, false);

或者，您可以检查每个父节点是否是一个a元素：

这里的例子

document.addEventListener('click', function(e) {
  var target = e.target

  while (target && target.tagName !== 'A') {
    target = target.parentNode;
    if (!target) { return; }
  }

  if (target.href.indexOf("link.php") > -1) {
    // ...
  }
}, false);

另一个选择是将事件侦听器直接附加到该a元素，然后访问该currentTarget属性，以获取事件附加到的元素（而不是触发事件的元素）。但是，这只会将事件附加到单个a元素：

这里的例子

document.querySelector('a').addEventListener('click', function(e) {    
    var href = e.currentTarget.href || '';
    if (href.indexOf("link.php") > -1) {
      // ...
    }
}, false);