Voiding Click Events Implicitly With jQuery Plugin: voidClick()
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.
Want to use code from this post? Check out the license.
Reader Comments
For forms, you should check out the jquery.form plugin. It's pretty slick!
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
Not silly at all, Ben. Very nice: it's on little things like these that large productivity increases are built.
@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.