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

using latest chrome, have notice event mousemove fires after mousedown or mouseup if mouse left @ same position.

i have odd behavior attaching event listener on document.documentelement.

same script on latest firefox works fine, issue seems on chrome only.

• why event fire?
• is there 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)

i have notice mousemove fire @ same time or within short distance (10 milliseconds) after mousedown pr mouseup fired.

so possible work use event.timestamp on mousemove comparisons.

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

another possible solution checking position of mouse when cb mousemove executed.

both solution work around 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>