如何制作点击后不跳转当前页面的HTML按钮链接？

嘿，这个需求挺常见的，我给你整理了几个实用的解决办法，你可以根据自己的实际场景来选：

1. 在新标签页打开链接（最常用场景） #

如果你的“触发链接”是希望用户能看到目标页面，但不想离开当前页面，直接用window.open()在新标签页打开就搞定了，代码很直观：

<button type="button" onclick="window.open('https://www.google.ca', '_blank');">GOOGLE</button>

这里的_blank参数就是指定在新标签页打开链接，当前页面会稳稳留在原地。放心，这种在用户主动点击按钮时触发的弹窗，浏览器一般不会拦截~

2. 悄悄发送请求（无需打开页面） #

如果你的需求只是“触发链接对应的请求”（比如调用后端接口、统计点击量），不需要用户看到目标页面，那可以用fetch API在后台发送请求：

<button type="button" onclick="fetch('https://www.google.ca');">GOOGLE</button>

这种方式会默默发送GET请求，用户完全感知不到页面跳转。不过要注意跨域问题，如果目标链接和你的页面域名不一样，可能需要目标服务器配置CORS权限才行。

3. 用<a>标签伪装成按钮（语义化更优） #

从HTML语义化的角度来说，链接用<a>标签是更标准的做法，我们可以通过CSS把它改成按钮的样子，再加上target="_blank"实现新标签页打开：

<a href="https://www.google.ca" target="_blank" style="display: inline-block; padding: 8px 16px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: #333; cursor: pointer;">GOOGLE</a>

这种方式既保留了链接的原生特性，又有按钮的视觉效果，还能避免JS事件可能带来的一些小问题。

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