拖动时firefox中input type=range上的onchange事件没有触发

Question

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中的实时更新。

但是，IE10不支持oninput，因此最好的方法是将这两个事件处理程序组合在一起，如下所示：

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

查看此Bugzilla线程以获得更多信息。