Want JQuery to ignore click on a particular child element

Question

I've delcared a click callback on a div that I would like ignored if a user clicks on a link inside that div. The function looks like this:

$(".section").click(function(){
    if ($(this).hasClass("solid")) {
        $(this).removeClass("solid");
        $(this).hover(fadeFunction, darkenFunction);
        $(this).fadeTo(150, inactiveOpacity);
    }
    else {
        $(this).addClass("solid");
        $(this).unbind("mouseenter");
        $(this).unbind("mouseleave");
        $(this).fadeTo(25, inactiveOpacity);
        $(this).fadeTo(150, activeOpacity);
    }
});

I've tried wrapping the if/else up in a if(!$(this).is("a)) { but there is no change in behavior. Can somebody point out what I'm misunderstanding or doing wrong?

Sorry if this is an easy question, I'm a JQuery/css beginner.

Answer 1

You can check if the event target is an anchor, like this:

$(".section").click(function(e){
    if($(e.target).is("a")) return;

    if ($(this).hasClass("solid")) {
        $(this).removeClass("solid");
               .hover(fadeFunction, darkenFunction);
               .fadeTo(150, inactiveOpacity);
    }
    else {
        $(this).addClass("solid");
               .unbind("mouseenter mouseleave");
               .fadeTo(25, inactiveOpacity);
               .fadeTo(150, activeOpacity);
    }
});

Answer 2

Try this:

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

Here you can find documentation: http://api.jquery.com/event.stopPropagation/