a 标签的跳转机制

结合着好未来秋招的一道面试题讲解一下 a 标签的跳转机制。

题目代码

<a href="https://www.baidu.com"
   onclick="window.open('https://www.csdn.net')">
  link
</a>

---

会弹出哪个页面？

会同时打开两个页面：

• 新窗口 / 新标签： https://www.csdn.net
• 当前页面跳转到： https://www.baidu.com

注意！如果 href 的值为 baidu.com ，则会跳转到 http://127.0.0.1:5500/www.baidu.com(我这里用的 vscode 插件会开启一个 5500 端口的页面)

---

1. 点击 <a> 触发 onclick

2. 执行 JS：

   window.open('https://www.csdn.net')

   → 打开新窗口（或新标签）

3. JS 执行完毕

4. 浏览器继续执行 a 标签的默认行为

   href="https://www.baidu.com"

JS 不会自动阻止默认行为

怎么禁用 onclick？

✅ 方式一：return false

<a href="https://www.baidu.com"
   onclick="return false">
  link
</a>

👉 return false =

✔️ preventDefault

✔️ stopPropagation

---

✅ 方式二：event.preventDefault

<a href="https://www.baidu.com"
   onclick="event.preventDefault()">
  link
</a>

---

✅ 方式三：JS 解绑（工程化）

a.onclick = null;

或

a.removeEventListener('click', handler);

---

❌ 错误理解澄清

onclick = () => {}

❌ 这样不会阻止 a 的默认跳转

---

SPA 中为什么还用 <a>？

• 框架（Vue / React）会：

  • 拦截 a 的默认行为
  • 用 history API 做无刷新跳转

• 但：

  • 语义仍然正确
  • 可降级

a vs button:

维度	<a>	<button>
语义	超链接（导航）	操作按钮
是否原生跳转	✅	❌
SEO	✅ 可被爬虫识别	❌
右键新开	✅	❌
中键点击	✅	❌
无 JS 是否可用	✅	❌
可访问性	✅ 天生支持	⚠️ 需处理