user139195 user139195 - 9 months ago 56
jQuery Question

jquery accordion prevent bubbling / allow default link action

I have an accordion setup as so:

$('.shortheadline').accordion({ active: false, header: '.headline', autoHeight: false, animated: 'slowslide', changestart: function(event, ui) { $('.brief').css('min-height','0') }, change: function(event, ui) { $('.brief:visible').css('min-height','80px'); $('.headline').blur(); } });

I want the click to only register on the .headline div, not the link inside. The link should take you to the article page.

<div class="shortheadline">
<div class="entry">
<div class="headline">
<div class="timestamp">11:34 AM</div>
<div class="title"><a href="">Jeff Gamet Shares iPhone Tips and Tricks on MacJury</a></div>
<div class="brief">
<div class="teaser_image"> <img src="/imgs/cache/imgs/teaser_images/20090708macjury_new-0x80.png" width="80" height="80" id="teas_48236" alt="macJuryJeff Gamet Shares iPhone Tips and Tricks on MacJury" /></div>
<div class="teaser"><p><em>The Mac Observer's</em> Jeff Gamet joined <em>MacJury</em> host Chuck Joiner to talk about Apple's iPhone OS 3.0, the iPhone 3GS, and to share some iPhone tips and tricks, too.</p> </div>
<!-- more entries -->

Is there a way to prevent event bubbling so the accordion only triggers on clicking a div?
Or is there a way to allow the link's default action to continue?

I've tried:

$("a").click(function(){ window.location=this.href; });

Which does make the link function, but it doesn't let the user open the link in a new tab/window.


Answer Source


$("a").click(function(event){ event.stopPropagation(); });

The click function is passed an 'event' object. By calling the 'stopPropagation' method of the event object, you can prevent bubbling.