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>