0

As title says, I noticed that on my canvas mousemove is fired when mouse buttons are pressed/released even though I'm not actually moving the mouse. The problem is that, in the case of releasing the button, it gets fired AFTER mouseup!

Is that normal behaviour?
How to fix/workaround? I really need my mouseup to fire last, or mousemove not to fire at all when releasing buttons; setTimeout is not a legit solution.

Sample: https://jsfiddle.net/h40mm4mj/1/ As simple as that: if you open console and click in the canvas, you'll notice mousemove is logged after mouseup

canvas.addEventListener("mousemove", function (e) {
  console.log("mousemove");
}, false);
canvas.addEventListener("mouseup", function (e) {
  console.log("mouseup");
}, false);

EDIT: Just tested, it only happens on Chromium, Windows.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
YoDevil
  • 41
  • 8

1 Answers1

1

I´ve was having the same issue. Solve comparing the previus mouse position with new mouse position : 

function onMouseDown (e) {
    mouseDown = { x: e.clientX, y: e.clientY };
    console.log("click");
}

function onMouseMove (e) {
    //To check that did mouse really move or not
    if ( e.clientX !== mouseDown.x || e.clientY !== mouseDown.y) {
        console.log("move");
    }
}

Taken from here : What to do if "mousemove" and "click" events fire simultaneously?

Julián
  • 21
  • 1
  • 6