JQuery lightbox: no

Question

I am trying to get jquery event without click event. Essentially, I'm trying to create a lightbox. Works great, but I would like it to close ONLY if the black space is clicked. If you click on the image, the lightbox should not be hidden.

See an example: http://jsfiddle.net/nrUCc/7/ I tried this: (row 42 in js column)

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

.. but still it fires when I click on the image.

Any suggestions? thanks

Answer 1

You can compare the target element with this :

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

e.target is the element that launches the click handler, this is the #lightbox element. So basically you say that you only run the click handler when you click #lightbox . This will also prevent the other children of the #lightbox handler from running above #lightbox .

Here is the violin

---

An alternative would be to add another click handler to the #lightbox > img elements and just stop the click event from spreading and call above:

 $('#lightbox > img').click(function(e) { e.stopPropagation(); });