CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
GibboK
GibboK

Reputation: 73918

How to prevent mousemove after mousedown or mouseup in Chrome [possible bug in Chrome]?

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.

http://jsbin.com/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:

Upvotes: 16

Views: 3633

Answers (2)

Steve Forbes
Steve Forbes

Reputation: 1

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.

Upvotes: 0

GibboK
GibboK

Reputation: 73918

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 comparisons.

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.com/jedotomoxu/1/

Solution based on mouse position:

http://jsbin.com/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>

Upvotes: 3

Related Questions