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?

Solution 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

Solution 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');
    }
}