Skip to main content
Ben Nadel at RIA Unleashed (Nov. 2009) with: Jason Delmore
Ben Nadel at RIA Unleashed (Nov. 2009) with: Jason Delmore

Voiding Click Events Implicitly With jQuery Plugin: voidClick()

By
Published in Comments (4)

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

15,811 Comments

@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.

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel