Acción al hacer clic fuera de una capa.

[VityOsma]

Hola, como puedo hacer que se ejecute una acción, que será que la capa desaparezca, al hacer clic fuera de ella.

Por ejemplo el de la siguiente pagina, al abrir la capa de iniciar sesión, si haces clic fuera de ella se oculta y si el clic es en alguno de los demás botones, se ejecuta la función de ficho botón.

http://www.booking.com/

Gracias.

[Italico76]

Los eventos involucrados son onClick() y onMouseOver()

[Alexis88]

Si solo deseas ocultar al elemento en cuestión luego de dar un clic en cualquier zona de la página excepto en el área que ocupa el elemento, debes de usar la propiedad event.target para detectar al elemento en donde se produjo el evento, que en este caso será el evento click. Luego, compara a este elemento con el elemento que quieres ocultar y si son distintos, procedes a ocultar al elemento mediante la propiedad display de CSS.

Código Javascript:

var div = document.getElementById("id_div");
window.addEventListener("click", function (event){
    if (event.target != div) div.style.display = "none";
}, false);
 

Así es como quedaría:


Saludos

[Italico76]

Alexis: como siempre aprendo algo de tus ejemplos jejeje.... esta vez lo de "transition" (buen efecto)

La pregunta es..... se que te gusta mucho usar event.target pero cual es la ventaja ?

[Alexis88]

Como ves en este ejemplo, el evento se asigna al objeto global, por lo que no importa en dónde ocurra, pues siempre se ejecutará la función asignada. Si no lo hicieras así, podrías asignar el mismo evento y función al resto de elementos del documento, pero sería redundante.

Otro caso en el que particularmente lo uso, es en los menúes de opciones, en los que uso elementos <li> con una data-* asignada. Cuando se produce el evento click en algún elemento <li>, sea este del menú o de otra parte, verifico que tenga el atributo data-* para realizar una operación determinada.

Hay muchos otros casos de aplicación, esto ya corresponde con la Programación Orientada a Eventos.

Saludos