8
A 标签内使用 href 属性执行 JS 产生的一个差异
source link: https://paugram.com/coding/the-difference-by-using-href-attr.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A 标签内使用 href 属性执行 JS 产生的一个差异
2021.06.12进击的码农
3
107
今天被老板叫去修了个某项目的小 Bug，是一处用于表单验证的逻辑编写方式不合理导致的。就是在 a 标签的 href 属性里面使用 javascript:xxxx() 这种方式执行函数。
这种写法在 Chrome 和 FireFox 下会有不同的执行效果，前者结束了「函数的执行」，后者则是「在页面上输出 false」。这代码不是我写的，但是就是要我修
代码已脱敏，并最小化进行了重现
<input id="input" placeholder="Name"/>
<a href="javascript:next_step();" class="btn red">Next</a>function next_step(){
let input = document.getElementById("input");
if(!input.value){
return false; // 此处在 FireFox 下运行，会使页面内容显示为 false
}
}验证表单的目的是禁止跳转到下一个步骤，而不是把页面内容进行修改！在 a 标签上使用 javascript 已经是不太推荐的方式了，我们把它更改为使用 getElementById 或 querySelector 的方式使用就可以解决。
<input id="input" placeholder="Name"/>
<a id="btn" class="btn red">Next</a>let btn = document.querySelector("#btn");
btn.onclick = next_step; // 不能带 () 执行
function next_step(){
let input = document.getElementById("input");
if(!input.value){
return false; // 任何浏览器都正常执行了
}
}这个问题在当下应该遇到的概率极低，因为无论是 jQuery，Vue 还是 React 等框架的实现都是以绑定 DOM 事件的方式实现 JS 执行，但还是写出来做个记录吧！
- 上一篇: Vite + TypeScript 模块引入别名配置
- 下一篇: 看完啦 (つд⊂)
特立独行的一只前端菜狗。本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！如本站内容对你有所帮助的话，不妨 捐助支持 一下？同时欢迎订阅关注 我的日记，唠嗑（分享）每日的折腾经历。
已有 3 条评论
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK