devocean, by Rawnet. Click hijacking in jQuery

Mike
@mikerfulcher on Twitter
6twenty on GitHub

Update November 11th, 2011: see my follow-up post for part 2, using jQuery special events and support for jQuery's new on/off event binding.

A long, long time ago, we were working on a project which involved fairly heavy use of ajax and 'click' event triggers in jQuery. At the time, this raised problems because in javascript, the 'click' event isn't always triggered from a normal left-click. I'm generally against hijacking all but normal left-clicks; I shouldn't be prevented from opening a link in a new tab just because it has a click event attached.

After some quick research I found this nice article by Mislav (@mislav). In it he demonstrates a simple method to hijack only normal left-click events, while letting all other click events (eg right-click or command-click) behave normally. After experiencing some odd behaviour in IE, I decided to package it all into a light jQuery plugin to keep my code nice & clean.

(function($) {
  function unmodifiedLeftClick(e) {
    return e.which <= 1 && !e.metaKey && !e.shiftKey;
  };
  $.fn.liveLeftClick = function(callback) {
    return this.live('click', function(e) {
      if (unmodifiedLeftClick(e)) {
        callback.call(this, e);
      }
    });
  }
  $.fn.bindLeftClick = function(callback) {
    return this.bind('click', function(e) {
      if (unmodifiedLeftClick(e)) {
        callback.call(this, e);
      }
    });
  }
  $.fn.delegateLeftClick = function(selector, callback) {
    return this.delegate(selector, 'click', function(e) {
      if (unmodifiedLeftClick(e)) {
        callback.call(this, e);
      }
    });
  }
})(jQuery);

The functions match the existing bind, delegate and live methods of event binding in jQuery (and could be extended to support jQuery 1.7's new on methods). Usage is almost exactly the same as usual, except that you don't need to specify the event:

$('#ajax-container a').bindLeftClick(function(e) {
  e.preventDefault();
});
$('#ajax-container').delegateLeftClick('a', function(e) {
  e.preventDefault();
});
$('#ajax-container a').liveLeftClick(function(e) {
  e.preventDefault();
});

Posted Nov 9th, 2011. Tagged javascript, jquery