onclick绑定跳转最简单，适合静态页；addeventlistener适合复杂逻辑；语义化跳转优先用标签；注意url协议、preventdefault()使用时机及location.replace()场景。

直接用 onclick 绑定跳转最简单

不需要 JS 文件、不用写函数，onclick 属性就能让按钮点击后跳转。浏览器原生支持，兼容性好，适合静态页面或快速验证。

常见错误是忘记加 javascript:void(0) 或写错 URL 格式，导致页面刷新或跳转失败。

• <button onclick="window.location.href='https://example.com'">跳转</button>
• 跳转到当前页锚点：onclick="location.hash='#section2'"
• 避免页面跳空白页：不要只写 onclick="location.href='xxx'" 而不加协议（如漏掉 https://），否则会当成相对路径
• 想新窗口打开？换成 window.open('https://example.com', '_blank')

addEventListener 更适合复杂逻辑

如果点击后要先校验表单、发请求、再跳转，或者一个按钮要绑定多个动作，就得用 JS 的 addEventListener。它比 onclick 灵活，也更利于解耦。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

容易踩的坑是事件监听写在 HTML 之前，导致 document.getElementById 找不到元素；或者重复绑定造成多次跳转。

• 确保 DOM 加载完成再执行，用 DOMContentLoaded 或把 script 放在 body 底部
• 示例：

  document.getElementById('myBtn').addEventListener('click', () => {
    if (confirm('确定跳转？')) {
      window.location.href = '/dashboard';
    }
  });

• 避免重复绑定：不要在循环里反复调用 addEventListener 同一个函数

用 @#@#@#@#@#@#@#@#@#@0

需要 POST 跳转？不能用 <a></a>，得用表单提交或 JS 发起请求

禁用状态处理：<a href="#" class="btn disabled" onclick="return false"></a>，配合 CSS 灰掉样式

跳转前阻止默认行为要注意场景

用 preventDefault() 是为了拦截原生跳转，但不是所有情况都该拦。比如在 <a></a> 上绑了 click 事件却忘了 preventDefault()，就会先执行 JS 又立刻跳转，造成逻辑错乱。

典型误用：给 <button type="submit"></button> 绑 addEventListener 却没调 event.preventDefault()，结果表单仍会提交并刷新页面。

• 只有在你明确要接管跳转逻辑时才调 event.preventDefault()
• <button type="button"></button> 默认无提交行为，一般不用拦
• 使用 location.replace() 替代 location.href 可避免用户点返回时回到当前页（适合登录后跳转）

实际项目中，跳转逻辑越靠近业务需求就越容易出边界问题——比如权限不足时该跳 403 页面还是弹提示，网络失败要不要 fallback 到 hash 跳转。这些没法靠一个 onclick 解决，得结合路由状态和错误处理来设计。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！