javascript - 输入类型=范围上的 onchange 事件在拖动时未在 Firefox 中触发

Question

当我玩 <input type="range"> 时, 只有当我们将 slider 放到一个新位置时，Firefox 才会触发 onchange 事件，在该位置 Chrome 和其他人在拖动 slider 时触发 onchange 事件。

如何在 Firefox 中进行拖动？

function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
}

<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" onchange="showVal(this.value)">

Answer 1

显然 Chrome 和 Safari 是错误的:onchange 应该只在用户释放鼠标时触发。要获得持续更新，您应该使用 oninput 事件，该事件将从鼠标和键盘捕获 Firefox、Safari 和 Chrome 中的实时更新。

但是，oninput 在 IE10 中不受支持，因此最好的办法是将两个事件处理程序结合起来，如下所示:

<span id="valBox"></span>
<input
  type="range"
  min="5"
  max="10"
  step="1"
  oninput="showVal(this.value)"
  onchange="showVal(this.value)"
/>

看看这个Bugzilla thread了解更多信息。