如何检测对链接的点击或链接的子项？答案

【问题标题】：How to detect a click on a link or a child of a link?如何检测对链接的点击或链接的子项？
【发布时间】：2022-10-22 00:39:59
【问题描述】：

我正在尝试使用 vanilla js 将一些参数附加到传出点击，所以我这样做了：

document.addEventListener('click', function (e) {
     if (!event.target.matches('a[href*="/outgoing/"]) return;
          e.target.href += "?this=that" 
}, false);

问题是，如果有人点击链接内的 div，例如：

<a href="/outgoing/link.html">
     <div>
       an outgoing link
     </div>
</a>

链接的目标现在是 div，而不是它的父级。包含对 <a> 标记的子级以及标记本身的点击的最简单方法是什么？

【问题讨论】：

你不能在链接本身上添加一个事件监听器吗？ document.querySelectorAll('a[href*="/outgoing/"]').forEach(i => i.addEventListener("click", ...))

标签： javascript html

【解决方案1】：

使用closest 而不是matches。论据是一样的。

【讨论】：

谢谢，这会奏效。我不知道为什么我不记得“最近的”。

【解决方案2】：

另一个答案实际上回答了您的问题，但我只是想补充一个事实，即通过将事件侦听器仅应用于您的元素，您的实现可以更加简单，因此子元素的点击会冒泡并触发您的事件侦听器和您不必担心所有这些混乱。另一个优点是，无论目标如何，您都不会在每次单击文档时触发事件侦听器。

我的实现如下所示：

document
  .querySelectorAll('a[href*="/outgoing/"]')
  .forEach(i => i.addEventListener('click', function (e) {
    // in case you want to open in new tab:
    if(e.target.target === "_blank") {
      e.preventDefault();
      window.open(e.target.href + "?this=that", "_blank").focus();
      return;
    }
    e.target.href += "?this=that";
  }, false));

【讨论】：

但是，这不会捕获脚本初始运行后动态添加到文档中的任何链接。
这不适用于我的具有 target="_blank" 的链接。我怎样才能得到那些呢？
@Quentin 基于 OP 的示例和问题，我认为不需要该功能，否则他们可以轻松实现您的答案。