jQuery: Detecting pressed mouse button during mousemove event

Question

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

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

Accepted Answer

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/

jQuery: Detecting pressed mouse button during mousemove event

Solution

Problem

Related problems