这篇文章上次修改于 996 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

今天被老板叫去修了个某项目的小 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 执行，但还是写出来做个记录吧！