pasar - mouseenter jquery

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

Question

Tengo una lista desordenada con mouseover y mouseout eventos adjuntos a los elementos li. Cada uno contiene un enlace y hay un poco de relleno en el li. Cuando muevo el mouse sobre el li, se desencadena el evento mouseover, pero cuando muevo el mouse sobre el enlace contenido en el li el mouseout y los eventos mouseover se activan en orden. Parece que los elementos secundarios están activando los eventos del mouse de los elementos principales ... ¿cómo hago para detener esto? Quiero que solo permanezca sobrepasado con el mouse al pasar el mouse sobre los enlaces, no activando 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

Estaba buscando el comportamiento equivelant en JS donde en AS3 puedes poner:

object.mouseenabled = false;

La forma en que encontré que funciona bastante bien es usar CSS y poner:

.element { pointer-events: none; }

(pero supongo que eso solo funciona si no necesitas el elemento para nada en absoluto. Lo uso para obtener información sobre herramientas que aparece en el hover, pero no quiero que se vea raro cuando mueves el mouse).

Answer 2

Parece que he encontrado la respuesta a mi propia pregunta. Para cualquier persona que pueda tener el mismo problema; prueba este código en su lugar. Parece que la flotación no se convierte en elementos secundarios como lo hacen 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 3

Puedes probar esto

$(''#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 4

Usa las clases de css para distinguir los diferentes niveles de menú. Luego, puede buscar fácilmente una clase u otra en sus selectores jQuery.

Answer 5

Use "event. stopPropagation ()" para evitar que los eventos stopPropagation hacia arriba:

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

Alternativamente, utilice los eventos mouseenter y mouseleave lugar de mouseover / out. jQuery normaliza su comportamiento en los navegadores y estos eventos tienen la ventaja de no burbujear ...