范围滑块输入事件在 IE 10 中未触发

Range slider input event not firing in IE 10

本文关键字：IE 输入 入事件 范围      更新时间：2023-09-26

我有一个范围滑块，我想听它的change和input事件。这在大多数浏览器中都可以正常工作，但在 IE 10 中，没有input事件触发，change像input应该的那样一遍又一遍地触发。这是代码：

.html：

<input id="slider" type="range" />

.js：

window.addEventListener('load', function() {
  var input = document.getElementById('slider');
  input.addEventListener('input', function(e) {
    console.log('input');
  });
  input.addEventListener('change', function(e) {
    console.log('change');
  });
});

这是在代码笔上：http://codepen.io/ZevanRosser/pen/YPQVzJ

我想知道是否有解决方法 - 填充物或一些简单的技巧。

所以我几天前想通了这一点，并认为我会发布我的解决方案。基本上，诀窍是检查您是否在IE中（使用您选择的嗅探方法）。然后劫持 change 事件以获取range输入并触发input。然后，向mouseup发射change.到目前为止，这似乎工作得很好：

（这是一支笔 http://codepen.io/ZevanRosser/pen/pvWzej）

window.addEventListener('load', function() {
  var input = document.getElementById('slider');
  input.addEventListener('input', function(e) {
    console.log('input');
  });
  input.addEventListener('change', function(e) {
    console.log('change');
  });
  var fixInputAndChangeEvents = function() {
    var currentSlider;
    var fireChange = function(e) {
      var changeEvent = document.createEvent('Event');
      changeEvent.initEvent('change', true, true);
      changeEvent.forceChange = true;
      currentSlider.dispatchEvent(changeEvent);
    };
    document.addEventListener('change', function(e) {
      var inputEvent;
      if (!e.forceChange && e.target.getAttribute('type') === 'range') {
        e.stopPropagation();
        inputEvent = document.createEvent('Event');
        inputEvent.initEvent('input', true, true);
        e.target.dispatchEvent(inputEvent);
        currentSlider = e.target;
        document.removeEventListener('mouseup', fireChange);
        document.addEventListener('mouseup', fireChange);
      }
    }, true); // make sure we're in the capture phase
  };
  var isIE = function() {
    var userAgent = navigator.userAgent;
    return userAgent.indexOf('MSIE') !== -1 ||  
      userAgent.indexOf('Trident') !== -1;
  };
  if (isIE()) {
    fixInputAndChangeEvents();
  }
});

我在我正在处理的项目中使用的实际版本中更改了一些内容。

  1. 该项目使用 lodash，因此应另一个开发人员的要求，我部分化了 fireChange 事件并将当前range输入作为第一个参数传递，而不仅仅是使用 currentSlider 变量。这基本上是为了避免碰撞 - 非常确定碰撞是不可能的，因为您一次只能滑动一个滑块，但我们认为安全总比抱歉好。

  2. 该项目已经有IE嗅探，所以我使用了你在这里看到的已经存在的东西。

以某种方式确定此事件行为是否存在而不是嗅探IE会很好，但是我无法弄清楚如何确定是否存在事件缺陷。

无论如何，如果其他人遇到此问题，希望这会有所帮助。我认为仍有一些改进的余地，但目前这已经足够好了。

编辑：

正如Justin Smith在评论中提到的，IE10不再支持条件注释。

不再支持条件注释

所以下面的代码在IE10下是正确的（我会删除不好的评论），这篇文章没有回应原来的答案。

源语言：

使用此代码，您将能够使用您的 ie 版本做您想做的事情：

如果您的浏览器不是IE版本之一，则不会html标签上找到ie类。此外，还将找到一个ie类和一个ieX版本。

<!DOCTYPE html>
<!--[if IE 6]><html lang="fr" class="ie ie9"><![endif]-->
<!--[if IE 7]><html lang="fr" class="ie ie10"><![endif]-->
<!--[if IE 8]><html lang="fr" class="ie ie11"><![endif]-->
<!--[if gt IE 9]><!--><html lang="fr"><!--<![endif]-->

下面你有：

<input id="slider" type="range" />

之后，在您的代码中，只需这样做：

  • 所有浏览器的触发input。
  • 消防change为所有人即。

所以

var html = document.getElementsByTagName("html")[0];
    slider = document.getElementById("slider"),
    input = (html.classList.contains("ie")) "change" : "input";
slider.addEventListener(input, function () {
    // Do something;
});

我找到了一个解决方案，我认为它比我迄今为止在这个主题上看到的任何东西都要好，因为它不需要你检查你正在使用的浏览器。

基本上，您不是检查输入，而是检查鼠标按下，设置间隔，然后在鼠标向上清除间隔。

var dragInterval = function dragInterval() {
        console.log(event);
    }, 10);
};
rangeInput.addEventListener('mousedown', function () {
    dragInterval();
});
rangeInput.addEventListener('mouseup', function () {
    clearInterval(dragInterval);
});
相关文章：