jquery: keep link clickable in clickable div

Question

What I want to do is prevent the click on the div if a users clicks a link inside that div. but without using the .click(function() {}); on the link.

Here's the code:

$('div.feature').click(function() { window.location = $(this).attr('rel');});

here's an example content of the div:

<div id="feature" rel="urlnumberone">
some text
<a href="javascript:topicchange(this);" class="insideLink">Link</a>
</div>

And for some specific reason I can't use something like this

$('.insideLink').click(function(event){
    event.stopImmediatePropagation();
});

I have to use this "topicchange()" function, is there any way to prevent the event propagation?

Thanks!

Answer 1

$(document).ready(function() {
    $('div#feature').click(function() {
        alert('div');
    });
    $('div#feature a').click(function(evt) {
        evt.stopPropagation();
    });
});

function topicchange(targ) {
    alert('link');
    return false;
}

Is this allowed? The topic change function is called directly from the href, but the click event is prevented from propagating. Or but everything take place in topicchange?

Answer 2

The example that you've provided should work, except that your div has an id of 'feature', but in the js you're targeting a class. jsfiddle.net/SNP3K.

<div id="feature" rel="urlnumberone">
    some text
    <a href="#" class="insideLink">Link</a>
</div>

.

$('div#feature').click(function() { 
    alert('div');
});

$('.insideLink').click(function(event){
    event.stopImmediatePropagation();
    alert('link')
});

Answer 3

<div id="feature" onclick="location.href='index.php';">
   <a href="anotherpage.php">link</a>
</div>

Easy as that!

Answer 4

According to http://api.jquery.com/bind/, event.stopPropagation should allow other event handlers on the target to be executed. You can still execute from the Href but you can also handle the default click bubbling to the div by ignoring it.

Full demo at: http://jsfiddle.net/leomwa/qrFQM/

Snippet:

function topicChange()
{
    alert('Message from Link: After the div mouse event, I can execute');
    return false;
}

$('div#feature').click(function(evnt)
{
    var $originatingTarget = $(evnt.target);
    if ($originatingTarget && $originatingTarget.is('.insideLink'))
    {
        alert('Message from Div: Ahh! You clicked on Link...');
        evnt.stopPropagation(); // Allows other handlers on the event.target to be executed.
    }
});

Very similar to @shanethehat.

Kudos to @shanethehat for asking for a clarification.