Gracias por tu visita, tus comentarios son muy importantes

lunes, 12 de septiembre de 2011

Detectar Click fuera de un Elemento con jQuery

El otro día de encontraba con un compañero de trabajo que estaba batallando para manipular un evento en un dropdown menú que habia hecho,
y el problema era que quería que una vez que le daba click en el menú y se expadía al hacer click fuera de este elemento este se volviera
a colapsar. Hay muchos lugares que presentaban un solución aparente pero aqui muestro un código que puede funcionar para muchos casos.



El código es muy simple pero la magía que hace jQuery es genial. Si se le da click en un html cualquiera se va a esconder el menú, así que para evitar esto
en nuestro elemento detenemos esta acción con stopPropagation(). Aquí lo que estamos haciendo en realidad es que estamos manipulando eventos.

El primer evento que sucede es el click de nuestro selector 'html', entonces si le damos click en '#dropList' el primer evento en responder es el de mayor jeraquía que es 'html', entonces se corre el metodo de esconder el menú.

En el segundo evento si le damos click en '#dropList' se va a esconder aunque este no se encuentre visible y para indicarle que este elemento es el que queremos usar, detenemos la ejecución de eventos padre con stopPropagation() y ejecutamos el de nuestro elemento '#dropList'.

No hay mucha ciencia pero si se desea mas informacrion de stopPropagation() pueden consultarla aquí. :D

2 comentarios:

Anónimo dijo...

En este post lo explican más detallado, de hecho el ejemplo funciona muy bien

http://www.forosdelweb.com/f127/click-afuera-elemento-830524/

-- Reedyseth -- dijo...

Gracia por ampliar mas el conocimiento de este asunto !