JavaScript: Check if mouse button down?

Regarding Pax' solution: it doesn't work if user clicks more than one button intentionally or accidentally. Don't ask me how I know :-(.

The correct code should be like that:

var mouseDown = 0;document.body.onmousedown = function() {   ++mouseDown;}document.body.onmouseup = function() {  --mouseDown;}

With the test like this:

if(mouseDown){  // crikey! isn't she a beauty?}

If you want to know what button is pressed, be prepared to make mouseDown an array of counters and count them separately for separate buttons:

// let's pretend that a mouse doesn't have more than 9 buttonsvar mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],    mouseDownCount = 0;document.body.onmousedown = function(evt) {   ++mouseDown[evt.button];  ++mouseDownCount;}document.body.onmouseup = function(evt) {  --mouseDown[evt.button];  --mouseDownCount;}

Now you can check what buttons were pressed exactly:

if(mouseDownCount){  // alright, let's lift the little bugger up!  for(var i = 0; i < mouseDown.length; ++i){    if(mouseDown[i]){      // we found it right there!    }  }}

Now be warned that the code above would work only for standard-compliant browsers that pass you a button number starting from 0 and up. IE uses a bit mask of currently pressed buttons:

• 0 for "nothing is pressed"
• 1 for left
• 2 for right
• 4 for middle
• and any combination of above, e.g., 5 for left + middle

So adjust your code accordingly! I leave it as an exercise.

And remember: IE uses a global event object called … "event".

Incidentally IE has a feature useful in your case: when other browsers send "button" only for mouse button events (onclick, onmousedown, and onmouseup), IE sends it with onmousemove too. So you can start listening for onmousemove when you need to know the button state, and check for evt.button as soon as you got it — now you know what mouse buttons were pressed:

// for IE only!document.body.onmousemove = function(){  if(event.button){    // aha! we caught a feisty little sheila!  }};

Of course you get nothing if she plays dead and not moving.

Relevant links:

• MouseEvent's button (DOM 2)
• MSDN's button

Update #1: I don't know why I carried over the document.body-style of code. It will be better to attach event handlers directly to the document.

This is an old question, and the answers here seem to mostly advocate for using mousedown and mouseup to keep track of whether a button is pressed. But as others have pointed out, mouseup will only fire when performed within the browser, which can lead to losing track of the button state.

However, MouseEvent (now) indicates which buttons are currently pushed:

• For all modern browsers (except Safari) use MouseEvent.buttons
• For Safari, use MouseEvent.which (buttons will be undefined for Safari) Note: which uses different numbers from buttons for Right and Middle clicks.

When registered on document, mousemove will fire immediately as soon as the cursor reenters the browser, so if the user releases outside then the state will be updated as soon as they mouse back inside.

A simple implementation might look like:

var leftMouseButtonOnlyDown = false;function setLeftButtonState(e) {  leftMouseButtonOnlyDown = e.buttons === undefined     ? e.which === 1     : e.buttons === 1;}document.body.onmousedown = setLeftButtonState;document.body.onmousemove = setLeftButtonState;document.body.onmouseup = setLeftButtonState;

If more complicated scenarios are required (different buttons/multiple buttons/control keys), check out the MouseEvent docs. When/if Safari lifts its game, this should get easier.

I think the best approach to this is to keep your own record of the mouse button state, as follows:

var mouseDown = 0;document.body.onmousedown = function() {     mouseDown = 1;}document.body.onmouseup = function() {    mouseDown = 0;}

and then, later in your code:

if (mouseDown == 1) {    // the mouse is down, do what you have to do.}