Duda con onClick()

[paskuini]

Hola de nuevo! vuelvo a estar aquí con mis interminables preguntas... jeje

Esta vez, mi duda es con respecto al evento onClick(); pues estoy creando 'una especie de lightbox cutre' para mostrar imágenes, notificaciones, etc....
Una vez, en uno de éstos, vi que al hacer click sobre la "sombra", se cerraba el lightbox.
Pues estoy intentando hacer lo mismo, pero no me acaba de salir bien. Cuando hago click en la sombra se cierra, sí... pero cuando hago click en el 'contenido' digamos, ¡también!... esto es lo que quiero evitar. Lo que me da a pensar esto es... ¿'onClick()' se hereda?

Código HTML:

<div id="shader_shadow" style="display:none" onClick="this.style.display=\'none\'; shaderClose()">
          <div id="shader_content" onClick=" ">
          </div>
</div> 

Código:

#shader_shadow	{width:100%; height:100%; position:fixed; top:0; left:0; background:url(1.png); z-index:998;}
#shader_content {width:700px; height:500px; position:fixed; left:50%; margin-left:-350px; top:50%; margin-top:-250px; background:#FFF; border:5px solid #333;; z-index:1000;}

[zerokilled]

buenas,
aunque no es el termino correcto, podria decirse que ciertos eventos se heredan. para poder entenderlo mejor, tendrias que leer acerca del modelo de eventos. una lectura que te podria interesar, http://kusor.net/traducciones/brainj...vents1.es.html. especificamente, tiene que ver con el tema de la propagacion de los eventos. es decir, que exactamente sucede cuando ocurre un evento y, en que orden y hasta donde llega los eventos.

puede haber varias soluciones:
- detener la propagacion del evento. consiste en registrar el evento en el elemento que funciona como contenedor del contenido del lightbox. fijate que no estoy mencionando el elemento contenedor del lightbox en si. en tu ejemplo seria #shader_content. en este evento invocas la funcion stopPropagation desde el objeto event. es importante que se debe entender que el elemento contenedor esta dentro del elemento que hace de fondo. tal como en tu ejemplo, #shader_content esta dentro de #shader_shadow.

- determinar desde que elemento ocurre el evento. si el evento ocurre directamente en el mismo elemento que se ha registrado el evento, entonces se procede con el cierre del lightbox. de lo contrario, se cancela el proceso. para determinar si ocurre en el mismo elemento, debes comparar la propiedad event.target (en iexplorer event.srcElement) con el elemento que funciona como fondo. en tu caso seria el elemento #shader_shadow.

- separar los elementos de fondo y contenedor. se refiere a que el elemento padre del contenedor no sea el fondo. sino mas bien que sean hermanos. de esta forma el evento registrado en el elemento de fondo no es afectado por lo que ocurra en el elemento contenedor. de nuevo, este detalle tiene que ver con la propagacion de los eventos.

Código:

<element> <!-- el lightbox -->
<element>sombra</element>
<element>contenedor</element>
</element>