Firefox 中 `<input type=\

在 Firefox 中触发 <input type="range"> 上的 onchange 事件

引言

对于经常使用 <input type="range"> 的开发者来说，你可能会惊讶地发现，Firefox 不会在滑块拖动过程中触发 onchange 事件，而其他浏览器（例如 Chrome）会。这可能会给跨浏览器兼容性带来麻烦，导致用户体验不佳。

问题分析

Firefox 认为 onchange 事件应该只在你完成输入时触发，而在你仍在拖动滑块时，输入尚未完成。这种行为与其他浏览器不同，可能会导致混乱和开发困难。

解决方法

为了在 Firefox 中获得与其他浏览器一致的行为，你可以使用 input 事件。input 事件会在滑块拖动时触发，允许你在拖动过程中执行代码。

要使用 input 事件，请使用以下代码：

document.querySelector('input[type="range"]').addEventListener('input', function() {
  // 在这里执行你的代码
});

代码示例

以下是一个示例，它在拖动滑块时显示滑块的值：

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

<script>
function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
}
</script>

优点和缺点

使用 input 事件有以下优点：

• 在所有浏览器中触发一致的 onchange 事件。
• 允许你在拖动滑块时执行代码。

使用 input 事件的一个缺点是它比 onchange 事件触发更频繁，这可能会导致性能问题。

结论

通过使用 input 事件，你可以确保 onchange 事件在所有浏览器中都触发，包括 Firefox。这使你可以构建更一致和响应更快的 Web 应用程序。

常见问题解答

• 为什么 Firefox 不在滑块拖动过程中触发 onchange 事件？

Firefox 认为 onchange 事件应该只在你完成输入时触发。

• 我应该使用 input 事件还是 onchange 事件？

如果需要在拖动过程中执行代码，请使用 input 事件。否则，你可以使用 onchange 事件。

• 使用 input 事件有什么缺点？

input 事件会比 onchange 事件更频繁地触发，这可能会导致性能问题。

• 如何在不使用 JavaScript 的情况下解决这个问题？

你可以使用第三方库或修改 CSS 代码来解决这个问题。

• 还有其他解决方法吗？

有许多不同的方法可以解决这个问题，这取决于你的具体情况和需求。