jquery: keep <a> 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!

Ivo

Why can't u use $('.insideLink').click(topicchange) and function topicchange(e){ e.stopImmediatePropagation(); //your code follows } – Frow

Answer 1

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')
});

Reassure

Thanks. But what I said is I CAN'T use the (.insideLink).click function, I HAVE to use the existing "topicchange()" function :) – Ivo

Sorry, I misread the question. So is the requirement that this topicchange function is called, or that it must be called from the href? – Reassure

the requirement is it must be called from the href, thanks again! :) – Ivo

Answer 2

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

Easy as that!

Transoceanic

Answer 3

$(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?

Reassure

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.

Fugal

You can perform xyz instead of returning false inside topicChange(). – Fugal