如何在书签小工具中替换所有锚标签的href属性？

我正在制作一个书签小工具，想要将页面上所有链接替换为"https://www.youtube.com/watch?v=dQw4w9WgXcQ"，目前写出了以下代码：

a.forEach(function(a){
a.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
});
alert("done.");

HTML编辑器显示a标签的href已更改，但点击链接无法跳转到新地址。我在非自有网站上使用该书签小工具，无法添加类或ID。

问题原因 #

很多网站会给链接绑定自定义点击事件（比如onclick属性、通过addEventListener绑定的监听），这些事件可能会阻止默认跳转行为，或者直接在事件逻辑里跳转到其他地址，单纯修改href属性不会覆盖这些自定义行为，导致点击后不生效。

解决方案 #

方案1：处理现有链接的自定义事件

直接清除链接自带的点击属性，并绑定强制跳转的事件，确保优先触发：

document.querySelectorAll('a').forEach(link => {
  // 设置目标跳转地址
  link.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
  // 清除标签自带的onclick属性
  link.removeAttribute('onclick');
  // 绑定点击事件，强制跳转并阻止其他事件干扰
  link.addEventListener('click', function(e) {
    e.stopImmediatePropagation();
    e.preventDefault();
    window.location.href = this.href;
  }, true); // 捕获阶段触发，优先于其他事件
});
alert("done.");

方案2：全局拦截点击（含动态加载的链接）

如果网站使用事件委托（在父元素上监听所有链接点击）或存在动态加载的链接，方案1可能失效，这时可以用全局点击拦截：

// 先处理页面已有的所有链接
document.querySelectorAll('a').forEach(link => {
  link.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
  link.removeAttribute('onclick');
});

// 全局拦截点击事件，处理所有a标签（包括动态加载的）
document.addEventListener('click', function(e) {
  let target = e.target;
  // 向上遍历找到最外层的a标签
  while (target && target.tagName !== 'A') {
    target = target.parentNode;
  }
  if (target && target.tagName === 'A') {
    // 阻止其他事件处理逻辑
    e.stopImmediatePropagation();
    e.preventDefault();
    // 强制跳转到目标地址
    window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
  }
}, true);

alert("done.");

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