在前端开发中，我们经常会遇到需要监听用户交互的场景。而其中一个非常常见的场景就是表单元素的变化。对于这种情况，我们可以利用 onChange 事件来实现。
但是，在 Firefox 中，如果我们使用 input 类型为 range 的表单元素，并尝试通过拖动来改变它的值，你会发现 onChange 事件并没有被触发。这是因为在 Firefox 中，只有鼠标松开的时候才会触发 onChange 事件。
那么，如何解决这个问题呢？下面就为大家介绍两种解决方案。
方案一：使用 onMouseUp 事件
我们可以使用 onMouseUp 事件来代替 onChange 事件。这是因为在拖动过程中，当鼠标松开时，onMouseUp 事件就会被触发。因此，我们可以在这个事件里面获取到当前 range 元素的值，并进行处理。
------ ------------ -------------------------------------
-------- ------------------------ - ----- ---------- - ------------------- -- ----- -- ----- ------- -
方案二：使用 input 事件
除了 onMouseUp 事件外，我们还可以使用 input 事件来监听 range 元素的变化。与 onChange 不同的是，input 事件会在元素的值发生变化时立即触发，而不是等到鼠标松开之后才触发。
------ ------------ -----------------------------------
-------- ------------------------ - ----- ---------- - ------------------- -- ----- -- ----- ------- -
需要注意的是，如果你同时使用了 onMouseUp 和 input 事件，那么在拖动结束时，两个事件都会被触发。因此，在处理逻辑时需要进行一些特殊的判断。
总之，在 Firefox 中，如果你想监听 input 类型为 range 的表单元素的变化，可以选择使用 onMouseUp 或者 input 事件来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9276