javascript - 在 Firefox 中，输入范围在 mouseup 上触发 "input"事件

Question

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

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

有什么想法可以通过输入事件停止这种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发布在 react 项目中。

您可以做的就是将此作为显示此行为的浏览器的后备。检测正在执行此操作的浏览器，并为它们提供后备，从而抵消额外的增量。

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>