如何让HTML <a>标签同时拥有href属性且默认触发onclick事件？

这个问题我之前也碰到过，完美的方案是给<a>标签加上真实的href属性，同时在onclick事件里阻止默认跳转行为，先执行你的自定义操作，之后再手动完成跳转。这样既保留了右键的原生上下文菜单功能（比如“在新标签页打开”），又能让左键点击优先执行你的JS代码。

具体实现代码 #

function go(event, page) {
    // 阻止默认的跳转行为
    event.preventDefault();
    
    // 执行你的重要操作，比如数据保存、弹窗提示等
    alert("You are being redirected!");
    
    // 操作完成后手动跳转到目标页面
    window.location.href = page;
}

a {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Link: <a href="/nextPage" onclick="go(event, '/nextPage')">Click me to go to the next page!</a>

为什么这个方案有效？ #

• 右键操作：当你右键点击链接时，浏览器的原生上下文菜单会直接使用href属性里的地址，不会触发onclick事件，所以完全支持“在新标签页打开”“在新窗口打开”等原生功能。
• 左键点击：左键点击时会触发onclick事件，我们通过event.preventDefault()阻止了浏览器默认的跳转行为，先执行自定义的业务逻辑，最后再通过window.location.href手动完成页面跳转。

为什么不推荐javascript:伪协议？ #

你之前尝试的href="javascript:go('/nextPage')"方案存在兼容性问题，比如在Chrome中右键点击时，浏览器会将其识别为脚本执行，导致跳转到about:blank#blocked页面，而且这种写法也不符合现代前端的最佳实践，可读性和维护性都较差。

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