Firefox、Safari中range类型input不支持change事件的解决方案是什么？

不同浏览器对<input type="range">的change事件触发规则存在兼容性差异：Chrome会在滑块拖动松开时触发change，但Firefox、Safari仅会在滑块失焦时触发该事件，和你遇到的表现一致。下面提供两种可落地的兼容方案：

方案1：防抖实现（最推荐） #

通过input事件加防抖逻辑模拟「调整结束后触发」的效果，兼容鼠标拖动、触摸滑动、键盘方向键调整等所有操作场景，实现成本最低，正常使用几乎感知不到延迟。

const slider = document.createElement('input')
slider.type = 'range'
slider.min = 10
slider.max = 20
document.body.appendChild(slider)

// 防抖定时器标识
let sliderTimer = null
// 防抖等待时间可根据需求调整，100-200ms体验最佳
const WAIT_TIME = 150

slider.addEventListener('input', e => {
  // 每次触发input先清空之前的定时器
  clearTimeout(sliderTimer)
  // 设定新定时器，停止操作WAIT_TIME后执行业务逻辑
  sliderTimer = setTimeout(() => {
    // 此处替换为原来change事件内的业务代码
    console.log("change模拟触发，当前值：", e.target.value);
  }, WAIT_TIME)
})

方案2：多事件组合实现（无延迟） #

如果需要完全无延迟对齐Chrome原生change的触发行为，可以结合输入结束类事件实现：

const slider = document.createElement('input')
slider.type = 'range'
slider.min = 10
slider.max = 20
document.body.appendChild(slider)

// 存储滑块最新值
let currentSliderValue = slider.value

// 实时同步滑块当前值
slider.addEventListener('input', e => {
  currentSliderValue = e.target.value
})

// 统一的触发逻辑
const handleChange = () => {
  // 此处替换为原来change事件内的业务代码
  console.log("change模拟触发，当前值：", currentSliderValue);
}

// 处理鼠标/触摸拖动结束场景
slider.addEventListener('pointerup', handleChange)
// 处理键盘调整后松开按键场景
slider.addEventListener('keyup', handleChange)
// 处理滑块失焦场景
slider.addEventListener('blur', handleChange)

注意：如果页面有多点触控等复杂交互场景，需要额外补充pointercancel等边缘事件的处理，普通业务场景下以上代码足够使用。

内容的提问来源于stack exchange，提问作者dugla