如何通过JavaScript点击<a>标签时为URL添加值并避免重复追加

这个问题我之前也碰到过——每次点击都会无脑在现有链接后面加参数，结果点几次就堆成一串了。下面给你几个实用的解决方案，按需选就行：

方法1：先检查再追加（最稳妥，适合需要确保链接始终正确的场景） #

每次点击时先判断当前链接里有没有已经包含/?Sample，只有不存在的时候才添加。这样哪怕用户手动改了链接，再次点击也能恢复成正确的带参数形式。

const links = document.querySelectorAll('a');
links.forEach(link => {
  link.addEventListener('click', function() {
    // 简单的字符串匹配，完全适配你的场景
    if (!this.href.includes('/?Sample')) {
      this.href += '/?Sample';
    }
  });
});

如果想要更严谨（比如担心参数出现在URL其他位置，或者字符串匹配有误差），可以用浏览器原生的URL API来处理，这是更规范的做法：

const links = document.querySelectorAll('a');
links.forEach(link => {
  link.addEventListener('click', function() {
    const urlObj = new URL(this.href);
    // 精确检查查询参数是否为?Sample
    if (urlObj.search !== '?Sample') {
      urlObj.search = '?Sample';
      this.href = urlObj.href;
    }
  });
});

方法2：给链接打标记，只处理一次（性能更好） #

如果只需要在第一次点击时修改链接，后续点击不用再管，那可以给处理过的链接加个自定义属性标记，点击时先看有没有这个标记，没有再修改。

const links = document.querySelectorAll('a');
links.forEach(link => {
  link.addEventListener('click', function() {
    if (!this.hasAttribute('data-link-updated')) {
      this.href += '/?Sample';
      this.setAttribute('data-link-updated', 'true');
    }
  });
});

方法3：用一次性事件监听（更简洁） #

利用事件监听的once: true选项，让这个点击事件只触发一次，修改完链接后浏览器会自动移除监听，后续点击就不会再触发修改逻辑了。

const links = document.querySelectorAll('a');
links.forEach(link => {
  link.addEventListener('click', function() {
    this.href += '/?Sample';
  }, { once: true }); // 关键是这个once选项
});

选哪个？ #

• 要是你需要确保每次点击时链接都是正确的带参数形式（比如链接可能被其他脚本修改），选方法1；
• 要是只需要第一次点击修改，之后保持不变，方法2或3更高效，其中方法3代码更简洁。

内容的提问来源于stack exchange，提问作者Mark Dev