2009-06-22 16 views
6

Tengo 2 capas de índice Z en una aplicación de mapa que estoy construyendo. Tengo un problema cuando hago clic en las capas para acercarme. El controlador de clics está en la capa de índice z subyacente y no deseo que se dispare cuando se hace clic en un control de la capa superior.Gestión de eventos de clic en capas indexadas en z

El problema que tengo es que el evento se levanta sin importar qué, pero la propiedad original de destino del evento no es la imagen en la capa subyacente cuando se hace clic en algo en la capa superior. ¿Hay alguna manera de cambiar esto?

Respuesta

4

Se llama evento-burbujeo, y puede controlarlo con el método event.stopPropagation() (event.cancelBubble() en IE). También puede controlarlo devolviendo verdadero/falso de los controladores llamados por todos los atributos de los elementos. Es un tema complicado, así que sugiero que hagas un poco de research.

Info: cancelBubble, stopPropagation

+0

Esta no es la propagación de eventos. El burbujeo de eventos sería donde tengo un controlador de eventos de clic en ambos elementos. Solo tengo un controlador de clics en la capa inferior. – Alex

+0

Entonces, ¿a qué te refieres con "El controlador de clics está en la capa zindexada subyacente y no quiero que se dispare cuando se hace clic en un control en la capa superpuesta". Los controles también usan burbujas. Quizás realmente quieras capturar pero eso no es compatible con IE – SpliFF

+1

¡Retiro mi comentario original! De hecho es un evento burbujeante, lo siento. Tomé tu sugerencia a bordo y lo puse a funcionar :) – Alex

1

Aunque esto no aborda el problema directamente, puede ser una solución viable hasta una solución más apropiado se presenta.

Escribe una sola función para ser llamada onClick y permite que la función sea lo suficientemente inteligente como para saber quién la llamó. La función toma la acción adecuada en función de quién hizo clic en ella. Puede enviar prácticamente cualquier cosa que sea única y luego usar un interruptor.

ejemplo simplificado:

<html> 
<body> 

<script type="text/javascript"> 
function myClickHandle(anID) 
{ 
switch(anID){ 
case 'bottom': 
     alert("I am on the bottom"); 
     break; 
case 'top': 
     alert("I am on the top"); 
     break; 
} 
} 
</script> 

<html> 
<div style="z-index:10"><input type=button value='top' onclick="myClickHandle(this.value)"/></div> 
<div style="z-index:11"><input type=button value='bottom' onclick="myClickHandle(this.value)"/></div> 
</body> 
</html> 
+1

¿Hay alguna forma de hacerlo sin molestar? es decir, ¿no mezclar el javascript con el html? – Alex

+0

Lo siento después de que el verano terminó. No volví al desbordamiento de la pila hasta esta noche. La etiqueta Script puede ir en su encabezado o en vivo en algún archivo externo, es solo por ejemplo sake. Onclicks tiene que estar allí para iniciar la acción. –

0

Creo que la mejor práctica es separar el controlador de eventos cuando el control se mueve a la capa superior y cuando el control vuelve a la capa inferior, se puede volver a conectar los eventos.

Cuestiones relacionadas