Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery: Detecting pressed mouse button during mousemove event

Tags:

jquery

I tried to detect which mouse button -if any- is the user pressing during a mousemove event under jQuery, but I'm getting ambiguous results:

no button pressed:      e.which = 1   e.button = 0 left button pressed:    e.which = 1   e.button = 0 middle button pressed:  e.which = 2   e.button = 1 right button pressed:   e.which = 3   e.button = 2 

Code:

<!DOCTYPE html> <html> <head>   <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body>  <input id="whichkey" value="type something"> <div id="log"></div> <script>$('#whichkey').bind('mousemove',function(e){    $('#log').html(e.which + ' : ' +  e.button ); });  </script>  </body> </html> 

How can I tell the difference between left mouse button pressed and no button at all?

like image 790
Sebastián Grignoli Avatar asked Nov 01 '10 00:11

Sebastián Grignoli


2 Answers

You can write a bit of code to keep track of the state of the left mouse button, and with a little function you can pre-process the event variable in the mousemove event.

To keep track of the state of the LMB, bind an event to document level for mousedown and mouseup and check for e.which to set or clear the flag.

The pre-processing is done by the tweakMouseMoveEvent() function in my code. To support IE versions < 9, you have to check if mouse buttons were released outside the window and clear the flag if so. Then you can change the passed event variable. If e.which was originally 1 (no button or LMB) and the current state of the left button is not pressed, just set e.which to 0, and use that in the rest of your mousemove event to check for no buttons pressed.

The mousemove handler in my example just calls the tweak function passing the current event variable through, then outputs the value of e.which.

$(function() {     var leftButtonDown = false;     $(document).mousedown(function(e){         // Left mouse button was pressed, set flag         if(e.which === 1) leftButtonDown = true;     });     $(document).mouseup(function(e){         // Left mouse button was released, clear flag         if(e.which === 1) leftButtonDown = false;     });      function tweakMouseMoveEvent(e){         // Check from jQuery UI for IE versions < 9         if ($.browser.msie && !e.button && !(document.documentMode >= 9)) {             leftButtonDown = false;         }          // If left button is not set, set which to 0         // This indicates no buttons pressed         if(e.which === 1 && !leftButtonDown) e.which = 0;     }      $(document).mousemove(function(e) {         // Call the tweak function to check for LMB and set correct e.which         tweakMouseMoveEvent(e);          $('body').text('which: ' + e.which);     }); }); 

Try a live demo here: http://jsfiddle.net/G5Xr2/

like image 76
DarthJDG Avatar answered Sep 23 '22 18:09

DarthJDG


Most browsers (except Safari) *) now support the MouseEvent.buttons property (note: plural "buttons"), which is 1 when the left mouse button is pressed:

$('#whichkey').bind('mousemove', function(e) {      $('#log').html('Pressed: ' + e.buttons); }); 

https://jsfiddle.net/pdz2nzon/2

*) The world is moving forward:
https://webkit.org/blog/8016/release-notes-for-safari-technology-preview-43/
https://trac.webkit.org/changeset/223264/webkit/
https://bugs.webkit.org/show_bug.cgi?id=178214

like image 27
Sphinxxx Avatar answered Sep 22 '22 18:09

Sphinxxx