输入范围滑块的 Javascript 代码在 Internet Explorer 11 中不起作用

Posted 2023-02-18

【中文标题】输入范围滑块的 Javascript 代码在 Internet Explorer 11 中不起作用

【英文标题】：Javascript code for Input range slider not working in internet explorer 11

【发布时间】：2018-11-26 00:04:23

【问题描述】：

这是我的html代码

<input type="range" name="que1" min="0" max="100" value="0" class="slider" id="myRange">

它的javascript代码是

var slider = document.getElementById('myRange')

function onChange(event) 
  var x = event.target.value

  if (x == 0) 
    slider.className = ''
   else if (x > 30 && x < 60) 
    slider.className = 'MyClass-1'
   else if (x == 100) 
    slider.className = 'MyClass-2'
  


slider.addEventListener('input', onChange)

当我拖动滑块时，值会发生变化，但类没有根据值添加，它在 chrome 中完美运行，但在 internet explorer 11 中无法正常运行。

在ie11中实现这个的任何解决方案？？

【参考方案1】：

根据caniuse（参见“已知问题”），IE10 和 IE11 在鼠标操作时触发 change，而不是 input。所以你需要处理change 和input。

slider.addEventListener('input', onChange)
slider.addEventListener('change', onChange) // For IE11