javascript - How to prevent mousemove after mousedown or mouseup in Chrome [possible bug in Chrome]? - Stack Overflow

admin管理员组

文章数量:1334825

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

Share Improve this question Follow edited Mar 25, 2016 at 22:17 Scott Weldon 10.2k66 gold badges5353 silver badges6969 bronze badges asked May 11, 2015 at 13:53 GibboKGibboK 74k147147 gold badges451451 silver badges674674 bronze badges 10

• 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

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 3

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.

本文标签：