用JavaScript做页面跳转，点击最直接的事件方式就是给元素绑一个click事件，然后在回调里改window.location.href。跳转就这么简单，页面没什么玄乎的点击。

但真要动手写，事件细节比想象中多。跳转我见过太多人栽在几个小坑里，页面今天一个个说清楚。点击

最基础的事件写法

假设页面上有个按钮，点击后跳到https://example.com：

<button id="goBtn">跳转</button> <script> document.getElementById('goBtn').addEventListener('click',跳转 function() {  window.location.href = 'https://example.com'; }); </script>

这段代码没毛病，浏览器里跑起来就能用。页面window.location.href赋值的点击那一刻，浏览器就开始加载新页面了。事件当前页面的跳转JS会继续执行完当前这个回调函数，然后才真正跳走，不是说你赋值完它立刻就把你代码掐断了。

但你可能不想用href

有些场景下href不合适。比如你想保留当前页面的历史记录，让用户点返回能回来——href默认就会压一条新记录进去，这倒是符合预期。但如果你想替换当前记录，不让用户返回，那就得用window.location.replace()：

document.getElementById('goBtn').addEventListener('click', function() {  window.location.replace('https://example.com'); });

登录成功后跳首页，通常用replace更合理。用户不该在登录页和首页之间来回弹。

绑定方式的选择

有人喜欢写onclick="window.location.href='...'"内联在HTML里。能跑，但我不推荐。结构和行为混在一起，后面维护起来头疼。而且内联写法在CSP（内容安全策略）严格的环境下会被直接拦掉。

addEventListener是更干净的做法。如果你用jQuery，$('#goBtn').on('click', fn)也行，本质一样。

还有一种情况：元素是动态生成的，绑事件的时候它还不存在。这时候要么用事件委托，把监听挂到父级上：

document.body.addEventListener('click', function(e) {  if (e.target.matches('.go-link')) {  window.location.href = e.target.dataset.url; } });

要么就在元素插入DOM之后再绑。前者更省事，尤其是列表里一堆跳转链接的时候。

一个容易忽略的问题：a标签的默认行为

如果你给<a>标签绑click事件做跳转，记得处理默认行为。比如：

<a href="/somewhere" id="link">点我</a> <script> document.getElementById('link').addEventListener('click', function(e) {  e.preventDefault(); // 做一些校验，通过后再跳 if (confirm('确定要离开吗？')) {  window.location.href = this.href; } }); </script>

不写preventDefault，浏览器会先执行你的回调，然后照样按href跳走。如果你的回调里有异步操作（比如发请求验证权限），那基本没等结果出来页面就已经跳了。

新窗口打开

window.open('https://example.com', '_blank')会开新标签页。注意浏览器会拦截非用户触发的window.open，但放在click回调里一般没问题，因为click本身就是用户行为。

不过现在很多浏览器对_blank加了noopener处理，新页面拿不到window.opener，安全性好了，但如果你依赖opener做通信就得留意。

路径问题

跳转路径写相对路径的时候，window.location.href = 'page2.html'是相对于当前页面URL解析的，不是相对于你的JS文件。这个搞混了会跳到莫名其妙的地方去。拿不准就用绝对路径，或者用new URL('page2.html', window.location.origin)拼一下。

差不多就这些。核心就一行window.location.href = url，剩下的都是围绕这行代码处理边界情况。

(责任编辑：知识)