¿Cómo ignoro los eventos del mouse en elementos secundarios en jQuery?

Question

Tengo una lista desordenada con eventos mouseover y mouseout asociados a los elementos li. Cada uno contiene un enlace y hay un poco de relleno en el li. Cuando paso el ratón por encima de la li, se dispara el evento mouseover, pero cuando coloco el mouse sobre el enlace que contenía en el li, el mouseout y los eventos mouseover se activan en orden. Parece que los elementos secundarios están disparando sus elementos principales eventos de mouse ... ¿cómo hago para detener esto? Quiero que solo quede mouseover cuando paseé sobre los enlaces, sin activar las animaciones cada vez que muevo el mouse sobre un enlace. Este es mi código;

jQuery(document).ready(function(){ 
     jQuery('#menu li ul').hide(); 
     jQuery('#menu li').mouseover(function() { 
      jQuery(this).children("ul").show('fast').stop; 
      return false; 
     }); 
     jQuery('#menu li').mouseout(function() { 
      jQuery(this).children("ul").hide('fast').stop; 
      return false; 
     }); 
}); 

<ul id="menu"> 
     <li><a href="">Some link</a> 
      <ul>Sub content</ul> 
     </li> 
</ul> 

Answer 1

Parece que he encontrado la respuesta a mi propia pregunta. Para cualquiera que pueda tener el mismo problema; prueba este código en su lugar. Parece que el vuelo estacionario no burbujea en elementos secundarios como lo hacen los otros eventos del mouse.

jQuery('#menu li').hover(
    function() { 
     jQuery(this).children('ul').show('fast'); 
     return false; 
    }, 
    function() { 
     jQuery(this).children('ul').hide('fast'); 
     return false; 
    } 
); 

Answer 2

Utilice las clases de CSS para distinguir los diferentes niveles de menú. A continuación, puede buscar fácilmente una clase u otra en sus selectores de jQuery.

Answer 3

Uso "evento stopPropagation()." Para detener los acontecimientos de burbujeando hacia arriba:

jQuery('#menu li a').mouseover(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 
    jQuery('#menu li a').mouseout(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 

alternativa, utilice los mouseenter y mouseleave eventos en lugar de pasar el ratón de entrada/salida. jQuery normaliza su comportamiento en los navegadores y estos eventos tienen el beneficio de no burbujear ...

Answer 4

puede probar esta

$('#menu li').live('mouseenter mouseleave', function (e) { 
    if (e.type == 'mouseenter') { 
     //Show ul 
    } else { 
     //Hide ul 
    } 
}); 

La ventaja es un uso de la delegación de eventos. ¡Buena suerte!

Answer 5

que estaba buscando el comportamiento equivelant en JS, donde en AS3 se puede poner:

object.mouseenabled = false; 

La manera que he encontrado que funciona bastante bien es el uso de CSS y poner:

.element { pointer-events: none; } 

(pero supongo que eso solo funciona si no necesitas el elemento para nada. Lo uso para la información sobre herramientas que aparece al pasar el mouse, pero no quiero que actúe de manera extraña cuando mueves el mouse).