jQuery $.live('click') Binds Both the Left and Right Mouse Buttons

Update: This issue has been fixed as of jQuery 1.4.1. I would recommend upgrading if possible.  That said, the solution below still applies to jQuery 1.4 and below.

Here's a little gotcha that I uncovered while working with jQuery's $.live() handler. In short, $.live('click') will detect both left and right mouse clicks (and probably middle clicks, as well). In other words, if you're expecting to only fire an event on a left click, you'll have to test for it and, unfortunately, Internet Explorer likes to behave differently here.

So, for all non-IE browsers you can do this:

$("#element").live('click', function(e) {
    if( e.button == 0 ) {
        // Left mouse button was clicked (non-IE)
    }
});

But for IE, you need to do this:

$("#element").live('click', function(e) {
    if( e.button == 1 ) {
        // Left mouse button was clicked (IE only)
    }
});

So let's make it easier on everyone. Although I hate browser checks, I don't really know of a way around this without one. (I also realize that $.browser has been deprecated — although still included — in jQuery 1.3.)

$("#element").live('click', function(e) {
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
        // Left mouse button was clicked (all browsers)
    }
});

Make sure you include the e argument in your anonymous function, otherwise e will be undefined.

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.