CODEWITHSUNDEEP
jquery
klewis
klewis

Reputation: 8350

How to control a conflicting click event with jQuery

I have the following HTML...

<div id="panel">
<a class="ext" href="http://google.com">Google</a>
</div>

If i have an $(#panel).on({ click: function(e) {...} event which will expand the div height or collapse it, how do it tell the click event to "not fire" if I click on the .ext class item, so that I can go to google.com.

Thanks for any advice

Upvotes: 1

Views: 1772

Answers (2)

David Thomas
David Thomas

Reputation: 253308

An alternative approach is to simply test the target of the click event:

$('#panel').on({
    click: function(e) {
        var target = e.target,
            $target = $(target);
        if ($target.hasClass('ext')) {
            window.location = target.href;
        }
        else if {
            // do whatever you'd normally do for a click on #panel
        }
    });

References:

Upvotes: 3

Jason P
Jason P

Reputation: 27012

Add this:

$('.ext').click(function(e) {
    e.stopPropagation();
});

That will prevent the event from bubbling up to the #panel element.

Upvotes: 9

Related Questions