今天被老板叫去修了个某项目的小 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 已经是不太推荐的方式了,我们把它更改为使用 getElementByIdquerySelector 的方式使用就可以解决。

<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 执行,但还是写出来做个记录吧!