Using the latest Chrome, I have notice that event mousemove fires after mousedown or mouseup even if the mouse is left at the same position.

I have this odd behavior attaching an event listener on document.documentElement.

Same script on latest Firefox works fine, issue seems on Chrome only.

• Why does this event fire?
• Is there any reasonable solution?

/

document.documentElement.addEventListener('mousedown', function(event){
    console.log('mousedown', event.pageX, event.pageY);  
}.bind(this));
document.documentElement.addEventListener('mouseup', function(event){
    console.log('mouseup', event.pageX, event.pageY);  
}.bind(this));
document.documentElement.addEventListener('mousemove', function(event){
    console.log('mousemove <<<<', event.pageX, event.pageY);  
}.bind(this));

Issue appears on Win 8.1:

• Chrome Version 42.0.2311.135 m

• Chrome Version 44.0.2398.0 canary (64-bit)

Using the latest Chrome, I have notice that event mousemove fires after mousedown or mouseup even if the mouse is left at the same position.

I have this odd behavior attaching an event listener on document.documentElement.

Same script on latest Firefox works fine, issue seems on Chrome only.

• Why does this event fire?
• Is there any reasonable solution?

http://jsbin./cefoteleqo/1/

document.documentElement.addEventListener('mousedown', function(event){
    console.log('mousedown', event.pageX, event.pageY);  
}.bind(this));
document.documentElement.addEventListener('mouseup', function(event){
    console.log('mouseup', event.pageX, event.pageY);  
}.bind(this));
document.documentElement.addEventListener('mousemove', function(event){
    console.log('mousemove <<<<', event.pageX, event.pageY);  
}.bind(this));

Issue appears on Win 8.1:

• Chrome Version 42.0.2311.135 m

• Chrome Version 44.0.2398.0 canary (64-bit)

• javascript
• html
• google-chrome

• I can't replicate (Chrome 42.0.2311.135 (64-bit) on OSX Yosemite) - I can get mousedown and mouseup with no mousemove. – joews Commented May 11, 2015 at 13:55
• I am using Chrome Version 42.0.2311.135 m on Win 8.1 – GibboK Commented May 11, 2015 at 13:56
• I got the same problem, chrome Version 42.0.2311.135 m - w8.1 – Jordumus Commented May 11, 2015 at 13:58
• With version 42.0.2311.135 (64-bit) on Mac, I get no mousemove with left click after mousedown then mouseup on left click but I do get mousemove for the same with right click. – marekful Commented May 11, 2015 at 13:59
• 2 probably related: code.google./p/chromium/issues/detail?id=161464 – GibboK Commented May 11, 2015 at 14:04

2 Answers 2

I have notice that mousemove fire at the same time or within a really short distance (10 milliseconds) after mousedown pr mouseup are fired.

So a possible work is to use event.timeStamp on mousemove for parisons.

The following script check if mousemove event fired "to soon" and print the result in console accordingly.

Another possible solution could be checking the position of the mouse when cb for mousemove is executed.

Both solution are just a work around to this Chrome Bug.

Solution based on timeStamp:

http://jsbin./jedotomoxu/1/

Solution based on mouse position:

http://jsbin./dinororaju/1/

<script>
    var timeDownUp = null;
    function start() {
        document.documentElement.addEventListener('mousedown', function (event) {
            timeDownUp = new Date().getTime();
            console.log('mousedown', event.pageX, event.pageY, event.timeStamp);
        }.bind(this));
        document.documentElement.addEventListener('mouseup', function (event) {
            timeDownUp = new Date().getTime();
            console.log('mouseup', event.pageX, event.pageY, event.timeStamp);
        }.bind(this));
        document.documentElement.addEventListener('mousemove', function (event) {
            var timeMove = new Date().getTime();
            timeDownUp += 10;
            if (timeMove > timeDownUp) {
                console.log('mousemove', event.pageX, event.pageY, event.timeStamp);
                if (event.which === 1) {
                    console.log('mousemove DRAG', event.pageX, event.pageY, event.timeStamp);
                }
            } else {
                timeDownUp = null;
            }
        }.bind(this));
    }
</script>

I came across this issue as well. The above solution was a bit too much for me. I am not sure if my solution works on all browsers but I can confirm it does work in the version of chrome I am currently running: Version 48.0.2564.109 m

svg.element.addEventListener('mousemove', mouseMoved);
svg.element.addEventListener('mousedown', mouseDown);

var mouseDownTriggered = false;

function mouseDown(evt)
{
    console.log('mouse down');
    mouseDownTriggered = true;
}

function mouseMoved(evt)
{
    if (mouseDownTriggered)
    {
        mouseDownTriggered = false
    }
    else
    {
        console.log('mouse moved');
    }
}

I noticed the order is always mouse (down -> up -> moved) when you mouse down. So I just flag the mouse down and have the mouse move absorb the call.