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

时间:2015-01-23 21:13:50

标签: javascript html5 internet-explorer-10

我有一个范围滑块,我想听一下changeinput个事件。这在大多数浏览器中都可以正常工作,但在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');
  });

});

这是在codepen:http://codepen.io/ZevanRosser/pen/YPQVzJ

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

3 个答案:

答案 0 :(得分:4)

所以我几天前想出了这个,并认为我会发布我的解决方案。基本上诀窍是检查你是否在IE中(使用你选择的嗅探方法)。然后劫持change输入的range事件,然后点击input。然后,在change上点击mouseup。到目前为止,这似乎很有效:

(这是一支笔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嗅探,所以我使用了那里已经存在的内容。

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

    无论如何,希望如果有人遇到这个问题会有所帮助。我认为仍有一些改进的余地,但现在这种方法已经足够好了。

答案 1 :(得分:2)

编辑:

Justin Smith在评论中提到,IE10不再支持条件评论了。

  

Conditional comments are no longer supported

所以下面的代码在IE10下是正确的(我会删除不良评论),这篇文章没有回复原来的答案。

ORIGINAL:

使用此代码,您将能够使用ie版本执行所需操作:

如果您的浏览器不是IE版本,则ie标记上不会找到html类。此外,还会找到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;
});

答案 2 :(得分:0)

我找到了一种解决方案,认为它比到目前为止在该主题上看到的任何解决方案都要好,因为它不需要您检查所使用的浏览器。

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

var dragInterval = function dragInterval() {
        console.log(event);
    }, 10);
};

rangeInput.addEventListener('mousedown', function () {
    dragInterval();
});
rangeInput.addEventListener('mouseup', function () {
    clearInterval(dragInterval);
});