javascript - 我应该对类型 'range' 的输入使用哪种事件类型？

Question

我有一个包含多个“范围”类型输入的表单，其中有一个隐藏的提交按钮，直到每个范围输入触发一个事件。我很好奇为此目的选择哪种类型的事件。

如果使用“点击”事件，某些较旧的浏览器(即 Windows 的 Safari)不会始终注册事件。使用“mouseup”可能不是一个好主意，因为在旧版浏览器或某些移动浏览器上，范围输入将生成为常规输入框。执行类似以下操作，根本不会在 Android 上运行的 Opera 浏览器上触发事件(在该浏览器上，范围输入呈现为常规文本输入框):

$('#my_form input').on("mouseup change", function(){ ... }

所以我的问题是，我应该选择哪种事件类型能够在旧版、移动和现代浏览器上正常运行，并且可以避免上面列出的问题？

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 thread了解更多信息。