如何点击按钮同时触发JS函数和页面跳转操作？
- 内容介绍
- 文章标签
- 相关推荐
小叨：按钮点一下干两件事儿？
话说回来.…. 先说实话， 咱们在写页面的时候，经常会碰到这么个尴尬：想让按钮点了先跑个业务逻辑，然后再跳转到新页面。
可是一不小心，href抢了风头，页面闪一下JS根本没来得及施行。
今天咱就聊聊，这事儿怎么整得既稳又好看。
一、 思路拆解：先干活儿，再走人
核心就是把，让跳转完全交给JS自己控制。
最直接的办法是：
哈哈， 这段代码看起来超级简洁，对吧？
二、 常见实现套路
方式一：内联onclick
注意啊，里面的分号一定要加，不然后面的代码会被吞掉。
方式二：外部JS + addEventListener
害， 这种写法兼容性更好，也更易维护。
三、 细节坑点大集合
- 忘记在语句末尾加分号，导致后面的代码不施行。
- "window.location=URL;"写成了单独的"window.location;"报错。
- "document.getElementbyId"大小写写错，找不到元素。
- "setTimeout"里用了箭头函数，却在IE8里炸开锅。
- "href='javascript:void'"后面又硬塞了"#"，后来啊双重跳转奇怪。
四、 兼容性小技巧
- IE8以下别用addEventListener，用attachEvent；
- 用innerHTML改内容前先判断元素是否存在否则null报错；
- 移动端防止双击闪屏，可以在onclick里加event.stopPropagation；
五、实战案例：登录后跳转并记录日志
说实话，这种“先等半秒再跳”在用户体验上还能接受。主要原因是用户看到反馈，不会觉得卡死。
六、如果真的想保留
其实可以把href设成“#”， 然后在JS里阻止默认行为：
摆烂。 不过咱个人建议干脆别放href了省得以后调试时找不到根源。
七、 ：随性但不随意
总之啊，要让按钮既能跑JS，又能换页，就把导航全交给JS管。 起初我以为... 代码保持清晰，一行一句，一行一个标签，别让它们互相抢风头。
对吧，你看。 搞定之后你会发现页面响应更快，业务逻辑也更可靠。以后碰到类似需求，只要记住这两个关键词——删除href + 用location.href/replace——就能轻松搞定啦！哈哈，祝你编码顺利~懂的都懂，不懂的自行搜索补刀吧！
小叨：按钮点一下干两件事儿？
话说回来.…. 先说实话， 咱们在写页面的时候，经常会碰到这么个尴尬：想让按钮点了先跑个业务逻辑，然后再跳转到新页面。
可是一不小心，href抢了风头，页面闪一下JS根本没来得及施行。
今天咱就聊聊，这事儿怎么整得既稳又好看。
一、 思路拆解：先干活儿，再走人
核心就是把，让跳转完全交给JS自己控制。
最直接的办法是：
哈哈， 这段代码看起来超级简洁，对吧？
二、 常见实现套路
方式一：内联onclick
注意啊，里面的分号一定要加，不然后面的代码会被吞掉。
方式二：外部JS + addEventListener
害， 这种写法兼容性更好，也更易维护。
三、 细节坑点大集合
- 忘记在语句末尾加分号，导致后面的代码不施行。
- "window.location=URL;"写成了单独的"window.location;"报错。
- "document.getElementbyId"大小写写错，找不到元素。
- "setTimeout"里用了箭头函数，却在IE8里炸开锅。
- "href='javascript:void'"后面又硬塞了"#"，后来啊双重跳转奇怪。
四、 兼容性小技巧
- IE8以下别用addEventListener，用attachEvent；
- 用innerHTML改内容前先判断元素是否存在否则null报错；
- 移动端防止双击闪屏，可以在onclick里加event.stopPropagation；
五、实战案例：登录后跳转并记录日志
说实话，这种“先等半秒再跳”在用户体验上还能接受。主要原因是用户看到反馈，不会觉得卡死。
六、如果真的想保留
其实可以把href设成“#”， 然后在JS里阻止默认行为：
摆烂。 不过咱个人建议干脆别放href了省得以后调试时找不到根源。
七、 ：随性但不随意
总之啊，要让按钮既能跑JS，又能换页，就把导航全交给JS管。 起初我以为... 代码保持清晰，一行一句，一行一个标签，别让它们互相抢风头。
对吧，你看。 搞定之后你会发现页面响应更快，业务逻辑也更可靠。以后碰到类似需求，只要记住这两个关键词——删除href + 用location.href/replace——就能轻松搞定啦！哈哈，祝你编码顺利~懂的都懂，不懂的自行搜索补刀吧！