输入范围在Firefox中的mouseup上触发“输入”事件

Question

似乎在input输入元素上使用type=range事件在Webkit和Firefox中的工作方式不同。我真的不明白为什么在释放鼠标的同时滑动滑块和时会触发事件。

我非常喜欢不希望在释放鼠标按钮时再次触发事件。

如何使用输入事件停止此mouseup废话？

var counter = document.querySelector('div'),
    rangeInput = document.querySelector('input');

rangeInput.addEventListener('input', function(){
  counter.innerHTML = 1 + +counter.innerHTML;
});

body{ font:18px Arial; }
input{ width:80%; }
div{ color:red; }
div::before{ content:'Event fired: '; color:#555; }
div::after{ content:' times'; color:#555; }

<p>Try to click the slider, wait and release the mouse</p>

<input type="range" min="1" max="100" step="1">

<div>0</div>

Demo page

更新：打开bug in bugzilla

Answer 1

如何听取change事件而不是input？

根据你的例子：

var counter = document.querySelector('div'),
    rangeInput = document.querySelector('input');

rangeInput.addEventListener('change', function(){
  counter.innerHTML = 1 + +counter.innerHTML;
});

body{ font:18px Arial; }
input{ width:80%; }
div{ color:red; }
div::before{ content:'Event fired: '; color:#555; }
div::after{ content:' times'; color:#555; }

<p>Try to click the slider, wait and release the mouse</p>

<input type="range" min="1" max="100" step="1">

<div>0</div>

然而，这似乎是一个浏览器错误。 See this issue张贴在反应项目中。

您可以做的是将此作为显示此行为的浏览器的后备。检测正在执行此操作的浏览器并为其取消这些后退，从而取消额外的增量。

var counter = document.querySelector('div'),
    rangeInput = document.querySelector('input');

rangeInput.addEventListener('input', function(){
  counter.innerHTML = 1 + +counter.innerHTML;
});
 rangeInput.addEventListener('change', function(){
  /* if firefox - http://stackoverflow.com/a/9851769/1437261 */
  if(typeof InstallTrigger !== 'undefined'){
     counter.innerHTML =  counter.innerHTML - 1;
  }
  
  return false;
});

body{ font:18px Arial; }
input{ width:80%; }
div{ color:red; }
div::before{ content:'Event fired: '; color:#555; }
div::after{ content:' times'; color:#555; }

<p>Try to click the slider, wait and release the mouse</p>

<input type="range" min="1" max="100" step="1">

<div>0</div>