Preventing Default Actions In A Bubbled Event In jQuery
Posted June 12, 2009 at 3:07 PM by Ben Nadel
I was just reading over on Jon Hartmann's blog about leveraging event bubbling in jQuery. It's a very cool concept and one that I have not played around with enough so far. When I was reading his post, however, I immediately wondered if default actions could be prevented using this technique. For example, if I have links within a list and the click handler is on the list (UL), can I prevent the default action of the link (navigate away from page) once the event has bubbled up beyond the link? Or, is it too late at that point? To test this, I put together a little demo in which the ancestor element, the UL, prevents the default on all actions:
| | | | | |
| | | |||
| | | |
As you can see from the video, even though the UL is handling an event that has bubbled past the link (target element), it is still able to prevent the default action of the link navigation. I'm sure if I had a richer understanding of the browser's event model, this would be obvious; but, I'm still learning. If I had to extrapolate this out into a meaning, it seems that you have the ability to control an event outcome until the browser has stopped handling it at every different level of listening.
Here is the code that I executed in the demo:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>Event Bubbling In jQuery</title>
- <script type="text/javascript" src="jquery-1.3.2.js"></script>
- <script type="text/javascript">
-
- // When the DOM is ready to be interacted with,
- $(function(){
-
- // Bind click event handling on the UL. This will allow
- // us to handle both link and LI clicks in one place
- // by leveraging event bubbling.
- $( "ul" ).click(
- function( objEvent ){
-
- // Return FALSE to prevent the default.
- return( false );
-
- }
- );
-
- });
-
- </script>
- </head>
- <body>
-
- <h1>
- Event Bubbling In jQuery
- </h1>
-
- <ul>
- <li>
- Go to <a href="http://www.t-nation.com">T-Nation</a>
- </li>
- <li>
- Go to <a href="http://www.cfbloggers.com">CF Bloggers</a>
- </li>
- <li>
- Go to <a href="http://www.nycfug.com">NY CFUG</a>
- </li>
- </ul>
-
- </body>
- </html>
I am not sure that I know what kind of situation this is best suited for; but, I think it's worth playing around with some.
Reader Comments
I've been using this technique for a while now.
In one example I have a link that has different functions when JavaScript is disabled or not.
With JavaScript is disabled, the link opens a new page with a form.
With JQuery (JavaScript Enabled), the link opens a JQuery UI Dialog, and loads the form via the JQuery load() event. I use return false to prevent the browser from navigating to the page with the form.
Very useful!
@Brian,
Sounds like cool stuff. I love jQuery!
I have had the same problem with Java, thanks for the information. I am pretty new at this and all the help I can get is way appreciated. Thanks again. Spence
You're right about the fact that it is due to the browser's event model.
I usually target anchors specifically with a ev.preventDefault() and override to whatever behavior I wish.
I've not tested this, but judging by the online documentation ... if I were to do preventDefault() on my anchors and bind some event to the ul, jQuery would still bubble up and I could even fire the default behavior that I initially prevented on the anchor. This could be a new way to identify anchor events by their parents rather than looking up the information directly from the anchor. Pretty cool if it works that way
@Drew,
Right, I believe you'd have to get the reference to the target first, before you could look up any info. Example:
$( objEvent.target ).attr( "href" )
I think the example above its pretty good, I think another key point is to mention is garbage collection and memory management, if you were to create a listener for lets say two hundred objects that doesn't seem so bad, but just wait when the page crawls to a halt in ie, its better to listen to an object such as a parent div, then find out which child element fired off the event, the performance gains are huge. Now if you were to use prototypejs instead of jquery, you can create custom events, as well it has support for binding, getting around the problem of scoping with the keyword this, its particuallry handy when using a method as event listener rather than a function as shown in the example above.
@James: How's the performance of using the JQuery live() event binding method?
