Avoid jQuery click function on elements

Question

I do have the following click function on a div element. Inside the div element are links. How can I stop the click function on this links? I tried z-index but it doesn't work.

$('.thumb.flip').click(function () {
 if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
     $(this).find('.thumb-wrapper').removeClass('flipIt');
 } else {
     $(this).find('.thumb-wrapper').addClass('flipIt');
 }
});

Answer 1

Try e.preventDefault()

$('.thumb.flip').click(function (e) {
    e.preventDefault();
    if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
        $(this).find('.thumb-wrapper').removeClass('flipIt');
    } else {
        $(this).find('.thumb-wrapper').addClass('flipIt');
    }
});

Answer 2

Add code to stop the click from propagating from the links up the DOM to the div:

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

See http://api.jquery.com/event.stoppropagation/

jsFiddle example

Answer 3

Capture the event object:

$('.thumb.flip').click(function (evt) {

Test to see what sort of element was clicked:

if (evt.target.tagName.toLowerCase() === "a") {
    return true;
}

Answer 4

Use the mouse down event and in your handler call event.stopPropagation() and event.preventDefault();

Answer 5

if click target is an a just return false else do normal stuff...

$('.thumb.flip').click(function (e) {
    if ($(e.target).is('a')) {
        return false;
    }
});

z-index won't do anything, however if you want to prevent clicks from css you can add pointer-events property to links and set the value none. That will disable all kind of events on links.

Answer 6

$('.thumb.flip').click(function (e) {
    if (e.target.nodeName==="A") {  //if target is an anchor, ignore
        return;
    }
    $(this).find('.thumb-wrapper').toggleClass('flipIt')  //toggle class
});

Answer 7

If you can edit markup do this:

<a href="javascript:void(0);" ></a>