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

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.