not jquery click function

Question

I want to set display: none; on an id, but only if you click the id itself and not the img in that id

    $(":not('#lightbox img'),#lightbox").click(function() {
        $("#lightbox").css( "display", "none" );
    });

can someone tell me how te get this to work?

Answer 1

Do it just like you wrote but change the first line:

$('#lightbox').find("*").add("#lightbox").click(function (event) {
    $(this).is('img') ? event.stopPropagation() : $("#lightbox").css("display","none");});

Answer 2

Use the target property of the Event object like

 $("#lightbox").click(function(e) {
        if(e.target.tagName != 'IMG'){
            $("#lightbox").css( "display", "none" );
        }
    });

Update

only if you click the id itself

Then, check the id of the target

$("#lightbox").click(function(e) {
            if(e.target.id == 'lightbox'){
                $("#lightbox").css( "display", "none" );
            }
        });