輸入范圍在Firefox中的mouseup上觸發“輸入”事件

Question

似乎在type=range輸入元素上使用input事件在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> 

演示頁面

---

更新： 在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> 

盡管如此，這似乎是一個瀏覽器錯誤。 請參閱 react project中發布的此問題 。

您可以做的是將此作為顯示此行為的瀏覽器中的后備。 檢測正在執行此操作的瀏覽器並為其提供此回退，從而取消額外的增量。

 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>