如何使用JS阻止HTML锚点标签点击时刷新页面

下面提供几种可行方案，按推荐程度排序：

方案1：通过事件监听阻止默认行为（推荐） #

这种方式保留原href属性，既不影响SEO，也支持用户右键新标签页打开的需求，同时拦截点击时的页面跳转：

先给锚点添加一个标识类方便选择：

<a href='?code=$user_code' class='view-user-link'>view user</a>

然后编写JavaScript代码绑定点击事件：

// 获取所有目标锚点元素
const viewLinks = document.querySelectorAll('.view-user-link');

// 遍历绑定点击事件
viewLinks.forEach(link => {
  link.addEventListener('click', function(event) {
    // 阻止浏览器默认的跳转行为
    event.preventDefault();
    
    // 这里添加你需要执行的自定义逻辑，比如提取用户code并处理
    const userCode = this.href.split('?code=')[1];
    console.log('要查看的用户code：', userCode);
    // 示例：发起AJAX请求加载用户详情、更新页面内容等
  });
});

方案2：修改href为无效值（简单但不推荐SEO场景） #

如果不需要考虑搜索引擎抓取或无障碍访问，可以直接将href设为javascript:void(0)，点击时不会触发页面刷新：

<a href='javascript:void(0)' class='' data-code='$user_code'>view user</a>

然后通过data-*属性获取用户code并处理：

document.querySelector('a[data-code]').addEventListener('click', function() {
  const userCode = this.dataset.code;
  console.log('要查看的用户code：', userCode);
  // 执行你的自定义操作
});

方案3：使用onclick返回false（旧写法） #

直接在锚点的onclick事件中返回false，也能阻止默认跳转：

<a href='?code=$user_code' class='' onclick="handleView(this); return false;">view user</a>

对应的处理函数：

function handleView(link) {
  const userCode = link.href.split('?code=')[1];
  console.log('要查看的用户code：', userCode);
  // 自定义逻辑
}

注意：优先选择方案1，它在功能、用户体验和SEO之间做到了平衡。

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