0

I have a script where i click an image to zoom it in, but i would the user to be able to click outside the image to close it.

i noticed though that if i set a function to the body 

$(body).click(function{ closeImage(); })

is going ot be a conflict between that function and the regular function i created for the image (let's call it openImage(); just for example's sake)...

there is any way to select the "remaining area" so it is the only portion of the screen that can fire closeImage(); ?

UPDATE: to clarify my problem: if i set a function on the boy and then i click the image, the image doesnt zoom anymore because it conflicts with the body function

Francesco
  • 24,839
  • 29
  • 105
  • 152

4 Answers4

1

See this answer for how to attach an event handler both to the body and the element, but cancel the event bubbling so that the body handler does not fire for particular sub-handlers.

Community
  • 1
  • 1
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • thanks! this is exactly the function i was looking for!! $(function(){ $("body").click(function(e){ if(e.target.id=="myDiv" || $(e.target).parents("#myDiv").size()){ alert("inseide div"); } else { alert("outside div"); } }); }) – Francesco Jan 12 '11 at 19:57
0

I would rather put a "glass" on body, image on it (and of course bind click to that glass). Many sites does like that (also with non transparent glass).

konrad.kruczynski
  • 46,413
  • 6
  • 36
  • 47
0

Try this:

$(body + ':not(#imageID)').click(function{ closeImage(); });
0

Consider using one() so it automaticly unbind itself once fired.

http://api.jquery.com/one/

Cybrix
  • 3,248
  • 5
  • 42
  • 61