Detect left mouse button press

Question

I hate this mess with the mouse buttons created by W3C an MS! I want to know if the left mouse button is pressed when I get a mousedown event.

I use this code

// Return true if evt carries left mouse button press
function detectLeftButton(evt) {
  // W3C
  if (window.event == null) {
    return (evt.button == 0)
  }
  // IE
  else {
    return (evt.button == 1);
  }
}

However, it does not work in Opera and Chrome, because it so happens that window.event exists there too.

So what do I do? I have some browser detection, but we all know it cannot be relied upon with all the masking some browsers do lately. How do I detect the left mouse button RELIABLY?

Answer 1

Updated answer. The following will detect if the left and only the left mouse button is pressed:

function detectLeftButton(evt) {
    evt = evt || window.event;
    if ("buttons" in evt) {
        return evt.buttons == 1;
    }
    var button = evt.which || evt.button;
    return button == 1;
}

For much more information about handling mouse events in JavaScript, try http://unixpapa.com/js/mouse.html

Answer 2

There is now a W3C standard event.buttons property supported by IE9 in standards mode , and Gecko 15+ .

The W3C completely stuffed up the event.button property, so for a standards compliant browser event.button is 0, but for browsers created before the standard, event.button is 1.

So code must avoid using event.button except for older browsers. The following code should work:

function detectLeftButton(event) {
    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
        return false;
    } else if ('buttons' in event) {
        return event.buttons === 1;
    } else if ('which' in event) {
        return event.which === 1;
    } else {
        return (event.button == 1 || event.type == 'click');
    }
}

Answer 3

You can use the following code-

onmouseup="if(window.event.which==1){//code for left click}
           else if(window.event.which==3){//code for right click}"

Answer 4

Even though event.buttons now works in Chrome, Safari still does not support it. One workaround is to use onmousedown and onmouseup events at document or parent level like: onmousedown="bMouseDown=true" onmouseup="bMouseDown=false"

Answer 5

// 0 left, 2 right, 1 middle, other.. extra buttons, gaming mouses

var buttonsArray = [false, false, false, false, false, false, false, false, false];
var mousePressed = false;

document.onmousedown = function(e) {
    buttonsArray[e.button] = true;
    mousePressed = true;
};

document.onmouseup = function(e) {
    buttonsArray[e.button] = false;
    mousePressed = false;
};

document.oncontextmenu = function() {
    return false;
}

Explanation: When mouse is down, we change to true the pressed button in our buttons array. When mouse is up, we change to false the pressed button to false.

Now we can establish which button is pressed more accurately, but we have a right click problem.. because with that button we open a contextmenu at the browser, and that escapes our control... so, we disable the context menu in order to properly detect right click. If we don't do that, we must resolve left click too... and its a complication that escapes this response.

In order to simplify things, we can add another variable mousePressed and flag if mouse is down or up.

Works perfect on chrome, I didn't test it in other browser but I guess its ok in firefox and opera too... IE??? I don't care IE.

Enjoy it!