How to Separate Between Mouse Move and Mouse Wheel Events?

Question

var timer;
var stoppedElement=document.getElementById("stopped");   // store element for faster access

function mouseStopped(){                                 // the actual function that is called
    stoppedElement.innerHTML="Mouse stopped";
}

window.addEventListener("mousemove",function(){
    stoppedElement.innerHTML="Mouse moving";
    clearTimeout(timer);
    timer=setTimeout(mouseStopped,300);
});

This fiddle detect the mouse move but when moving the mouse wheel it said that mouse is moving, can we separate between move and wheel events ?

See http://stackoverflow.com/questions/16529807/mousemove-event-is-triggered-onscroll-even-when-mouse-was-not-moved-on-chrome — artm, Jun 16 '15 at 14:15
well when I move mouse wheel(scroll) it doesn't say 'mouse moving'. maybe your mouse is broken? — sertsedat, Jun 16 '15 at 14:15
Yes this is in chrome only, in firefox it just say "mouse moving" when move not when wheeling — ahmad soliman, Jun 16 '15 at 14:24

score 1 · Accepted Answer · answered Jun 16 '15 at 14:50

In addition to scroll events, Webkit browsers fire mousemove events, since the cursor can be in a different position after the scrolling.

The solution is to manually check, whether the position changed, or not:

var timer;
var stoppedElement=document.getElementById("stopped");   // store element for faster access

function mouseStopped(){                                 // the actual function that is called
    stoppedElement.innerHTML="Mouse stopped";
}

window.addEventListener("mousemove",function(e){
    if ((window.lastX !== e.clientX && window.lastX !== undefined)
        || (window.lastY !== e.clientY && window.lastY !== undefined)) {
        stoppedElement.innerHTML="Mouse moving";
        clearTimeout(timer);
        timer=setTimeout(mouseStopped,300);
    }   
    window.lastX = e.clientX
    window.lastY = e.clientY
})

<div id="stopped"></div>

How to Separate Between Mouse Move and Mouse Wheel Events?

1 Answers1