[SOLUCIONADO] Acción al hacer click 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/

[Italico76]

Se logra con onClick seguido de OnMouseOver ..... y display:none / block o bien con visibility

Lo probe solo en CHROME ...

Código Javascript:

<style type="text/css">
 
 
.toolbar li {
    display:inline; /* los elementos comparten una linea horizontal */
    background-color:#eee;
    border:1px solid;
    border-color:#f3f3f3 #bbb #bbb #f3f3f3;
    margin:0;
    padding:.5em;
    zoom: 1;
}
 
#opt3_sub
{
        display:none;
        margin-left:180px;
        width: 200px;
        min-height: 100px;
        border: solid 1px #bbb;         
}
 
</style>
 
<ul class="toolbar">
 
<li><a href="#" id="opt1">Home</a></li>
<li><a href="#" id="opt2">About us</a></li>
<li><a href="#" id="opt3">Products</a></li>
<li><a href="#" id="opt4">FAQs</a></li>
<li><a href="#" id="opt5">Contact us</a></li>
</ul>
 
<div id="opt3_sub">Alguna cosa</div>
 
 
<script>
 
productos   = document.getElementById('opt3');  
opt3_sub    = document.getElementById('opt3_sub');
 
Handler1 = function()
{
    opt3_sub.style.display="block";
    console.log('Desplegando');
;};
 
Handler2 = function()
{
    opt3_sub.style.display="none";
    console.log('Ocultando');
;};
 
 
productos.addEventListener ('click',Handler1,false);
opt3_sub.addEventListener ('mouseout',Handler2,false);
 
 
</script>
 

[marlanga]

hay muchas formas de hacerlo. La que uso es recogiendo los eventos click en el document general y trantarlos. Así la modal sólo se cerrará haciendo click explícitamente, ignorando el mouseout.
http://jsfiddle.net/marlanga/V76uj/

[VityOsma]

Hola de nuevo, gracias por las respuetas.

Italico, eso no es lo que buscaba, porque no haces clic fuera, y además si no estas encima de la capa al pulsar el botón para mostrarla ni siquiera se muestra.

marlanga, eso si es lo que buscaba aunque no acabo de entenderlo todo, lo que hacer es añadir a todos los elementos del documento la funcion onclick para cerrar la capa y comprobar que el click no haya sido producido en la capa modal ni en ninguno de sus hijos verdad? lo que no entiendo es para que sirve lo de function(e), igual tengo que investigarlo un poco. Que indica esa "e", me lo puedes explicar así por encima? gracias, un saludo.

[marlanga]

Los eventos javascript se disparan en cadena. CUnado haces click en un elemento HTML, se dispara su onclick. Luego se dispara el onclick de su padre, luego el onclick del padre de su padre, y así sucesivamente hasta dispara el evento onclick del objeto "document", que es el nodo raiz del árbol DOM de la página, padre ancestro de todos los elementos HTML de una página.

El function (e){ ... } es la función definida por mí que se ejecuta cuando se "captura" un evento con código. El argumento "e" que le paso, es el objeto que representa el evento.
Aquí puedes leer más: http://librosweb.es/javascript/capitulo_6.html

Hay una técnica que se llama "delegación de eventos", que se aprovecha de esta característica de encadenamiento de disparo de eventos. Recojo por ejemplo los eventos "onclick" sobre el objeto document, así que cuando hagas click en cualquier elemento de la página, se disparará mi código. ¿Cómo sé sobre qué elemento se hizo el click realmente? Pues me lo dice el objeto "event", que yo llamo "e", que contiene un montón de información útil directamente relacionada con el tipo de evento disparado.

Y por último, el e.stopPropagation() evita que la cadena de eventos se siga ejecutando, es decir, evita que se ejecute en mi código el evento "onclick" sobre el padre del elemento html que acabo de capturar.

Teniendo estas ideas claras, el código es muy sencillo de entender.

[VityOsma]

Todo entendido, ya lo añadido a mi web, y además me he quedado con la explicación para poder seguir utilizándolo cuando sea necesario. Muchas gracias, quien quiere institutos teniendo gente así por aquí jeje.

Así que si no he entendido mal, al utilizar function(e){....}, dentro del código de esta función "e" sera el elemento que ha disparado el evento, ¿me equivoco?.

Podría llamar a una función enviando el elemento disparador del evento, por ejemplo "miFuncion(function(e))" ¿podría funcionar? o "miFuncion(e)", o "function(e){miFuncion(e)}" ¿Es esto posible? ¿Cuál sería la sintaxis correcta? Gracias otra vez.

[PHPeros]

No. En todos los navegadores (excepto en IE), a todos los handlers y listeners de los eventos se les pasa un argumento que contiene el correspondiente objeto Event. Tú simplemente estás indicando que dicho objeto va a quedar referenciado en una variable local con nombre "e", que bien podría ser cualquier otro.

De lo que estás hablando es de su propiedad target, ésta contiene el elemento del DOM que disparó el evento.

Saludos

[Alexis88]

Claro que es posible, pero cada forma que presentas dependerá de lo que desees hacer pues en JS hasta las funciones pueden ser pasadas como argumentos a otra función.

Saludos

[VityOsma]

Ok, perfecto, tema solucionado.

Gracias a todos.