当我玩<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);
}
};
}
其他回答
这个工作为我在反应引导
<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;
}
}}
/>
你可以使用JavaScript的"ondrag"事件来连续触发。它优于“输入”，原因如下:
浏览器的支持。 可以区分“ondrag”和“change”事件。“输入”触发拖拽和更改。
jQuery:
$('#sample').on('drag',function(e){
});
参考: http://www.w3schools.com/TAgs/ev_ondrag.asp
还有另一种方法——在元素上设置一个标志，表明应该处理哪种类型的事件:
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 >
Andrew Willem的解决方案并不兼容移动设备。
以下是他的第二个解决方案的修改，适用于Edge、IE、Opera、FF、Chrome、iOS Safari和移动设备(我可以测试):
更新1:删除“requestAnimationFrame”部分，因为我同意这是不必要的。
var listener = function() {
// do whatever
};
slider1.addEventListener("input", function() {
listener();
slider1.addEventListener("change", listener);
});
slider1.addEventListener("change", function() {
listener();
slider1.removeEventListener("input", listener);
});
更新2:对安德鲁2016年6月2日的更新答案的回应:
谢谢，安德鲁-这似乎在我能找到的每一个浏览器(Win桌面:IE, Chrome, Opera, FF;Android Chrome, Opera和FF, iOS Safari)。
更新3:if ("oninput in slider)解决方案
下面的代码似乎可以跨上述所有浏览器运行。(我现在找不到原始来源。)我在用这个，但后来在IE上失败了，所以我去找了一个不同的，因此我在这里结束了。
if ("oninput" in slider1) {
slider1.addEventListener("input", function () {
// do whatever;
}, false);
}
但在我检查你的解决方案之前，我注意到这在IE中又工作了-也许有一些其他的冲突。
