Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFinNC 2009 (Raleigh, North Carolina) with: Phil Molaro

Voiding Click Events Implicitly With jQuery Plugin: voidClick()

By Ben Nadel on

When binding an event handler to a click event using jQuery, I'd have to say that 99.99% of the time, I want to cancel the default click event and route all handling through my event binding. Because of this, I've gotten very tired of the repetitive nature of always returning false in my event handlers:

  • $( selector ).click(
  • function( objEvent ){
  • // Cancel default event and propagation.
  • return( false );
  • }
  • );

As such, I finally took a few minutes to think about how this type of code could be refactored to remove the repetition. What I came up with was a jQuery plugin, voidClick(), that decorates the click() event binding, executes the given event handler, and then returns false (cancelling the event implicitly):

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>jQuery Plugin For Code Short Cuts</title>
  • <script type="text/javascript" src="jquery-1.3.2.js"></script>
  • <script type="text/javascript">
  •  
  •  
  • // This method acts just like binding a click-event; the
  • // difference is that it cancels the default event
  • // implicitly such that you don't have to in your method.
  • jQuery.fn.voidClick = function( method ){
  • // Bind a click event to each item in the collection.
  • this.click(
  • function(){
  • // Execute given method callback in current
  • // context as defined by jQuery.
  • method.apply( this, arguments );
  •  
  • // Cancel default event.
  • return( false );
  • }
  • );
  •  
  • // Return existing jquery collection for chaining.
  • return( this );
  • }
  •  
  •  
  •  
  • // When the DOM is ready, initialize.
  • $(function(){
  •  
  • // Bind click event to link.
  • $( "a" ).voidClick(
  • function(){
  • // Alert link HREF to test "this" context.
  • alert( $( this ).attr( "href" ) );
  • }
  • );
  •  
  • });
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <h1>
  • jQuery Plugin For Code Short Cuts
  • </h1>
  •  
  • <p>
  • <a href="http://www.google.com">Navigate Away</a>!
  • </p>
  •  
  • </body>
  • </html>

As you can see, the voidClick() method, takes the given event handler, executes it in the context of the jQuery collection, and then returns false. The return of false cancels the default event and the event propagation such that the user-defined event handler does not have to worry about it. Of course, this does not work for all situations, but you can easily revert back to the traditional click() event binding if need-be.

I know this might seem like such a silly plugin, but it's been saving me a lot mental frustration! In fact, I've even extended this to submit() binding on forms and its been great.



Reader Comments

Ben,

Maybe I am missing something, because this seems to easy, but isn't this what the preventDefault() method is for in jQuery?

$( selector ).click(
function( objEvent ){
// Cancel default event and propagation.
objEvent.preventDefault();

// Handle Event here
}
);

Ref: http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

Reply to this Comment

Not silly at all, Ben. Very nice: it's on little things like these that large productivity increases are built.

Reply to this Comment

@Jason,

Returning "false" is the functional equivalent of calling preventDefault() and stopPropagation(). Most of the time, this is exactly what I want to do.

@Hal,

Agreed! The little things make the big difference over the long haul. As Clark would say - it's not the climb up the mountain that kills you, it's the pebble in your shoe.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.