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

Question

It seems like using the input event on a type=range input element works differently in Webkit and Firefox. I really don't understand why the event fires both on sliding the slider and while releasing the mouse.

I very much do not want the event to fire again when releasing the mouse button.

Any ideas how to stop this mouseup nonsense with the input event?

 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

---

Update: opened a bug in bugzilla

Answer 1

How about listening to the change event instead of input ?

As per your example:

 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> 

This seems to be a browser bug nevertheless. See this issue posted in react project.

What you could do is to have this as a fallback in browsers that show this behaviour. Detect the browsers that are doing this and have this fallback for them which cancels out the extra increament.

 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>