当我玩<input type="range">时，Firefox只有在我们将滑块拖放到Chrome和其他滑块被拖动时触发onchange事件的新位置时才会触发onchange事件。
如何在Firefox中进行拖拽?
function showVal（newVal）{ document.getElementById（“valBox”）.innerHTML=newVal; } <span id=“valBox”></span> <输入类型=“范围” min=“5” max=“10” step=“1” onchange=“showVal（this.value）”>
当前回答
还有另一种方法——在元素上设置一个标志，表明应该处理哪种类型的事件:
function setRangeValueChangeHandler(rangeElement, handler) {
rangeElement.oninput = (event) => {
handler(event);
// Save flag that we are using onInput in current browser
event.target.onInputHasBeenCalled = true;
};
rangeElement.onchange = (event) => {
// Call only if we are not using onInput in current browser
if (!event.target.onInputHasBeenCalled) {
handler(event);
}
};
}
其他回答
为了获得良好的跨浏览器行为和可理解的代码，最好是将onchange属性与表单结合使用:
函数showVal () { valBox。innerHTML = invalid .value; ｝ <形式onchange = " showVal ()" > <input type="range" min="5" max="10" step="1" id="inVal"> > < /形式 < span id = " valBox " > < / span >
使用oninput也是一样，值是直接改变的。 函数showVal () { valBox。innerHTML = invalid .value; ｝ <形式oninput = " showVal ()" > <input type="range" min="5" max="10" step="1" id="inVal"> > < /形式 < span id = " valBox " > < / span >
你可以使用JavaScript的"ondrag"事件来连续触发。它优于“输入”，原因如下:
浏览器的支持。 可以区分“ondrag”和“change”事件。“输入”触发拖拽和更改。
jQuery:
$('#sample').on('drag',function(e){
});
参考: http://www.w3schools.com/TAgs/ev_ondrag.asp
这个工作为我在反应引导
<Form.Control
type="range"
className="slider"
min="0.1"
max="10"
step={0.1}
value={intensity}
onChange={(e: any) => {
if (!e.target.onInputHasBeenCalled) {
setIntensity(parseFloat(e.target.value.toString()));
e.target.onInputHasBeenCalled = true;
} else {
e.target.onInputHasBeenCalled = false;
}
}}
/>
还有另一种方法——在元素上设置一个标志，表明应该处理哪种类型的事件:
function setRangeValueChangeHandler(rangeElement, handler) {
rangeElement.oninput = (event) => {
handler(event);
// Save flag that we are using onInput in current browser
event.target.onInputHasBeenCalled = true;
};
rangeElement.onchange = (event) => {
// Call only if we are not using onInput in current browser
if (!event.target.onInputHasBeenCalled) {
handler(event);
}
};
}
显然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线程以获得更多信息。
