Javascript onmouseout aplica a div despedido por los niños

que estoy teniendo problemas para encontrar una solución a este a través de Google, pero habría asumido que sería un problema bastante común. Tengo un div que he solicitado un controlador de eventos onmouseout a (el controlador se utiliza para rodar un menú utilizando jquerys función "slideUp", como me gustaría el menú que se oculta cuando las hojas de ratón). El problema es que los elementos secundarios de ese div también causan que el controlador dispare (acepto que esto es por diseño debido a la naturaleza del modelo de evento de burbujeo). Ahora, lo que me gustaría saber es cuál es la mejor manera de ignorar estos eventos que se desencadenan por los hijos de divs y solo subir el menú cuando el mouse deja el div al que se aplica el evento.Javascript onmouseout aplica a div despedido por los niños

Gracias

Fuente

2009-08-15 Simon Fox

Gracias por todas las respuestas rápidas, la respuesta aceptada terminó siendo la mejor solución. –

Lo que se busca es MouseEnter y mouseleave.

Un buen ejemplo se puede encontrar en este enlace (que han comparado tanto MouseEnter y al pasar el ratón)

http://docs.jquery.com/Events/mouseover

una entrada de blog

http://blogs.oracle.com/greimer/entry/mouse_over_out_versus_mouse

Fuente

2009-08-15 03:38:08

hmm i dindt conozca estos eventos – Cleiton

Nota: estos no son eventos W3C estándar. Solo se implementan de forma nativa en IE ... jQuery hace que funcionen vinculando eventos regulares de mouseover/out y solo se activa una vez, cuando el objetivo es el objetivo deseado. – James

-2

No, no es por diseño, se han aplicado accidentalmente sus onMouseOut '' a demasiados divs. Solo quieres aplicarlo a uno.

Fuente

2009-08-15 03:33:32

Solo lo había aplicado a un divisor y si tiene en cuenta el modelo de evento de burbujeo, determinaría que se trata de un comportamiento de diseño. Eche un vistazo al enlace al modo peculiar en @Vineet Reynolds responda a esta pregunta. –

Lo siento pero estás equivocado. Lo has aplicado a más de 1 div. –

lea la publicación vinculada –

-1

Simon se puede comprobar que ha trigged el evento utilizando la propiedad jQuery Event.target.

Fuente

2009-08-15 03:36:58 Cleiton

Es posible que desee intentar cancelar el evento de burbujeo o propagación. Quirksmode.org tiene una práctica sección que explica cómo desactivar el burbujeo o la propagación en ambos modelos.

Desde jQuery presenta el W3C standards a los desarrolladores, que no tendrá que establecer la propiedad cancelBubble. Llamar al método stopPropagation() será suficiente.

Fuente

2009-08-15 03:47:39

Utilice el "MouseEnter" y "mouseleave" en el div padre en su lugar - los elementos secundarios no afectará a la "MouseLeave"

document.getElementById('Main_Menu_Container_Div').addEventListener('mouseenter',function(){ 
// do something like your 'slideup' or what ever you want. 
});

"evento de propagación" como se le conoce, es el problema - " evento en element2 tiene prioridad. Esto se llama evento de burbujeo ". http://www.quirksmode.org/js/events_order.html

Uso Ejemplo:

<style> 
.Child_Div_Button{ 
    float:left; 
    cursor:pointer; 
    height:100px; 
    width:100px; 
    background-color:#CCC; 
    border:#000 thin solid; 
    margin:2px; 
    padding:2px; 
} 


.Child_Div_Button:hover{ 
    background-color:#FFF; 
} 
</style> 
</head> 
<body> 

<div id="Parent_Div_Container" style="height:300px; width:300px; border:#333 thin solid; background-color:#D2FFFF;"> 
Parent Div 
<div id="button_container"> 
     <div class="Child_Div_Button"> 
     Button 1 Child Div 
     </div> 

     <div class="Child_Div_Button"> 
     Button 2 Child Div 
     </div> 
    </div> 

</div> 


<script type="text/javascript"> 

     document.getElementById('button_container').style.display = 'none';// initiate 

     document.getElementById('Parent_Div_Container').addEventListener('mouseenter',function(){ 
      document.getElementById('button_container').style.display = 'block'; 
     }); 
     document.getElementById('Parent_Div_Container').addEventListener('mouseleave',function(){ 
      document.getElementById('button_container').style.display = 'none'; 
     }); 



</script>

Parece que funciona en la última versión de Firefox sin necesidad de jQuery - Pero Chrome, IE y Safari, todos parecen necesitar la biblioteca jQuery para que esto funcione. ¿Es eso decir que mozila ahora es totalmente compatible con el uso de mouseenter y mouseleave?!?! Si es así ... ¡SÍ! para el navegador que realmente hace cosas para ayudar a los desarrolladores:)

Fuente

2012-09-12 04:28:22 KDawg

Javascript onmouseout aplica a div despedido por los niños

Respuesta

Cuestiones relacionadas