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!

Why can't u use `$('.insideLink').click(topicchange)` and `function topicchange(e){ e.stopImmediatePropagation(); //your code follows }` — Jishnu A P, Apr 05 '11 at 09:40

score 27 · Accepted Answer · edited Apr 05 '11 at 10:05

27

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

edited Apr 05 '11 at 10:05

Rian Schmits

3,096
3
28
44

answered Apr 05 '11 at 09:41

shanethehat

15,460
11
57
87

Thanks. But what I said is I CAN'T use the (.insideLink).click function, I HAVE to use the existing "topicchange()" function :) – Phil Apr 05 '11 at 09:46
Sorry, I misread the question. So is the requirement that this topicchange function is called, or that it must be called from the href? – shanethehat Apr 05 '11 at 10:12
the requirement is it must be called from the href, thanks again! :) – Phil Apr 05 '11 at 11:00

score 3 · Answer 2 · answered Sep 04 '15 at 09:27

3

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

Easy as that!

answered Sep 04 '15 at 09:27

Ankur Singh

161
1
6

score 1 · Answer 3 · answered Apr 05 '11 at 11:18

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

leon · Answer 4 · 2018-07-18T12:22:32.593

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.

You can perform xyz instead of returning false inside topicChange(). — leon, Apr 05 '11 at 11:25

jquery: keep link clickable in clickable div

4 Answers4

Linked