Question

I am trying to make a simple plugin, so when the user clicks on the photo, he gets a bigger photo (because all photos are smaller that the real ones). And my question is, how can this bigger photo close when the user clicks on body or html, but it shouldn’t close it if it was clicked on the photo? It probably should look like this:

$('body, html').click(function() {

   if(clickedOnPhoto)

      //do nothing

   else

     //close the photo

})

Answer 1

Rather than checking what the target was and deciding what to do; you can add a click event handler to the document element to close big photos and add a click event handler to the big photos that stops the propagation of the click event so it doesn’t reach the document element:

$('#photo-container').on('click', '.big-photo-elements', function (event) {
    //stop the event from propagating normally so that it does not reach the `document` element
    event.stopPropagation();
});

$(document).on('click', function () {
    //run code to close big photos, this will not be triggered if a user clicks on the big photo
    $('.big-photo-elements').hide();
});