Confusion about Javascript mouse event

Question

I wrote a callback function to record mouse event:

var body = document.querySelector("body");
var callback = function (e) {
    console.log(e.type);
}

body.addEventListener('mousedown', callback, false);
body.addEventListener('mouseup', callback, false);
body.addEventListener('mousemove', callback, false);

what confused me is, when I do a click, in addition to triggering the mousedown and mouseup events, it will trigger mousemove event too.

Watch the demo here: http://jsfiddle.net/r6Gqn/1/

Why is it that I do not move the mouse, but trigger the mousemove event? How can I stop triggering the mousemove event?

Are you sure you are not moving the mouse? even just a wee little bit — musefan, Aug 14 '13 at 14:00
``mousemove`` is not triggering for me on click. I think you might have a *very* sensitive mouse. — Nick Tomlin, Aug 14 '13 at 14:00
If it makes you feel any better it happens for me too, and it happens even if my mouse is in the air (optical, so it cant be moving). It does not happen in Firefox, but it does happen in **Chrome**. — Gray, Aug 14 '13 at 14:02
What browsers is everyone using? I am using Chrome and `mouseup` also fires `mousemove` (even mid-air) — musefan, Aug 14 '13 at 14:04
@musefan does it also fire 2 `mousemove`s when you right click (in mid air)? — Gray, Aug 14 '13 at 14:06
There is also a bug here: https://code.google.com/p/chromium/issues/detail?id=180505 — Gray, Aug 14 '13 at 14:10
@Gray:thank you, your answer is one solution, but I prefer the the solution of the duplicate question — hh54188, Aug 15 '13 at 15:09
@hh54188 if that is the case, you should flag your question as a duplicate or copy the answer from there and accept it. Otherwise, this question looks open. Thanks. — Gray, Aug 15 '13 at 15:36

Gray · Answer 1 · 2013-08-14T14:35:15.437

I have made a workaround using jQuery (easier for me, I am sure it can be adapted for plain js). It seems like no one believes this is happening, but it happens for me in Chrome as well. (I am holding the mouse in the air, it cannot possibly be moving.) There is an existing bug for it for Chrome. I could not reproduce it in FireFox.

Anyway, here is the fix I came up with. There is a demo here: JsFiddle

$('#box').bind('mousemove', moved);

function moved() {
    console.log('mousemove');
}

$('#box').mousedown(function (ev) {
    console.log("mousedown");
});

$('#box').mouseup(function () {
    $("#box").unbind("mousemove");
    console.log("mouseup");
    setTimeout(function () {
        $("#box").bind("mousemove", moved);        
    }, 1);
});

Basically, this modifies the mouseup event to unbind mousemove, wait a very short time, then rebind it.

Confusion about Javascript mouse event

1 Answers1