原生JS实现所有<a>标签点击提示href后跳转的方案

需求说明 #

不使用jQuery或任何第三方库，实现用户点击<a>标签跳转前，通过alert事件提示用户即将访问的URL地址。页面中存在多个href属性各不相同的<a>标签，要求点击任意<a>标签时，先弹出提示告知用户即将跳转的地址，用户确认后再离开当前站点。

预期交互流程 #

• 文档完成加载
• 用户点击某一个<a>标签
• 弹出alert弹窗，展示当前被点击<a>标签的href属性值
• 用户关闭alert弹窗后，浏览器开始加载对应href指向的网站

原有代码缺陷 #

原示例代码仅第一个<a>标签（Link A）可正常触发效果，存在两处核心问题：

• document.querySelector('a')仅会匹配DOM中第一个a元素，无法覆盖页面所有链接
• 直接给单个元素绑定事件的模式，无法对后续动态新增的a标签自动生效

优化实现方案 #

采用事件委托方案实现，将点击事件绑定到全局document节点，通过事件冒泡机制捕获所有a标签的点击行为，既覆盖初始页面的所有链接，也自动适配后续动态插入的新链接。

完整JS代码 #

document.addEventListener('DOMContentLoaded', () => {
  // 全局委托点击事件
  document.addEventListener('click', (e) => {
    // 向上查找最近的a标签，兼容a标签内部嵌套子元素的场景
    const link = e.target.closest('a');
    if (!link) return;

    // 阻止默认跳转
    e.preventDefault();
    // 获取当前点击链接的目标地址
    const targetUrl = link.href;
    alert(`You are going to: ${targetUrl}`);
    // 提示后执行跳转
    window.location.href = targetUrl;
  });
});

测试用HTML结构 #

<div id="container">
  <a class="link" href="https://www.microsoft.com/">Link A</a>
  <a class="link" href="https://www.google.com/">Link B</a>
  <a class="link" href="https://www.apple.com/">Link C</a>
</div>

实现要点说明 #

• 使用closest('a')做目标匹配，即使a标签内部嵌套图标、文本标签等子元素，也能准确定位到对应的链接节点，避免事件目标判断失效
• 事件绑定在全局document节点，后续动态新增的任意a标签无需重复绑定事件，点击即可自动触发提示逻辑
• 直接读取当前触发事件的链接元素的href属性，不会出现所有链接都跳转到第一个地址的逻辑错误

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