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

Question

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

• Chrome Version 42.0.2311.135 m

• Chrome Version 44.0.2398.0 canary (64-bit)

Answer 1

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>