Cómo deshabilitar los eventos de mouse desencadenados por elementos secundarios?

Question

Permítanme describir el problema en detalle:

Quiero mostrar un div posicionado absoluto al pasar el mouse sobre un elemento. Eso es realmente simple con jQuery y funciona bien. Pero cuando el mouse pasa sobre uno de los elementos secundarios, desencadena el evento mouseout del div que contiene. ¿Cómo evito que javascript active el evento mouseout del elemento contenedor al pasar un elemento secundario?

¿Cuál es la mejor y más corta forma de hacer eso con jQuery?

Aquí es un ejemplo simplificado para ilustrar lo que quiero decir:

HTML:

<a>Hover Me</a> 
<div> 
    <input>Test</input> 
    <select> 
    <option>Option 1</option> 
    <option>Option 2</option> 
    </select> 
</div> 

Javascript/jQuery:

$('a').hover(function() { $(this).next().show() } 
       function() { $(this).next().hide() }); 

Answer 1

La pregunta es un poco antigua, pero me encontré con esto el otro día.

La forma más sencilla de hacer esto con las últimas versiones de jQuery es utilizar los mouseenter y mouseleave acontecimientos en lugar de mouseover y mouseout.

Puede probar el comportamiento rápidamente con:

$(".myClass").on({ 
    'mouseenter':function() { console.log("enter"); }, 
    'mouseleave':function() { console.log("leave"); } 
}); 

Answer 2

Por razones de simplicidad, me acaba de reorganizar el html una mordió para poner el contenido recién visualizado dentro del elemento al que se asocia el evento mouseover:

<div id="hoverable"> 
    <a>Hover Me</a> 
    <div style="display:none;"> 
    <input>Test</input> 
    <select> 
     <option>Option 1</option> 
     <option>Option 2</option> 
    </select> 
    </div> 
</div> 

Entonces, se podría hacer algo como esto:

$('#hoverable').hover(function() { $(this).find("div").show(); }, 
         function() { $(this).find("div").hide(); }); 

---

Nota: No recomiendo CSS en línea, pero se hizo para hacer el ejemplo más fácil de digerir.

Answer 3

La forma en que generalmente he visto esto manejado es tener un retraso de aproximadamente 1/2 segundo entre mover el mouse del elemento HoverMe. Cuando mueva el mouse al elemento fijo, querrá establecer alguna variable que señale que está sobre el elemento, y luego básicamente evitará que la parte que está cerca se oculte si se establece esta variable. Luego debe agregar una función oculta similar OnMouseOut del elemento fijo para que desaparezca cuando retire el mouse. Lo siento, no puedo darte ningún código, o algo más concreto, pero espero que esto te indique la dirección correcta.

Answer 4

Estoy simplemente comprobando si las coordenadas del mouse están fuera del elemento en el mouseout-event.

Funciona pero es un montón de código para una cosa tan simple :(

function mouseOut(e) 
{ 
    var pos = GetMousePositionInElement(e, element); 
    if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y) 
    { 
     RealMouseOut(); 
    } 
    else 
    { 
     //Hit a child-element 
    } 
} 

Código cortado para facilitar la lectura, no va a funcionar fuera de la caja.

Answer 5

Usted está buscando el jQuery equivalente de javascript a prevenir el burbujeo de eventos

mira esto:.

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

Básicamente necesita capturar el evento en los nodos DOM hijos, y detener su propagación en el árbol DOM. Otra forma, aunque realmente no se sugiere (ya que puede afectar seriamente los eventos existentes en su página), es establecer la captura de eventos en un elemento específico de la página, y recibirá todos los eventos. Esto es útil para el comportamiento de DnD y tal, pero definitivamente no para su caso.

Answer 6

Estoy de acuerdo con Ryan.

Su problema es que el "siguiente" div no es un "hijo" de A. No hay forma de que HTML o jQuery sepan que su elemento "a" está relacionado con el div infantil en el DOM. Envolverlos y poner un vuelo estacionario sobre el envoltorio significa que están asociados.

Sin embargo, tenga en cuenta que su código no está en línea con las mejores prácticas. No establezca el estilo oculto en línea en los elementos; si el usuario tiene CSS pero no javascript, el elemento se ocultará y no se podrá mostrar. Una mejor práctica es colocar esa declaración en el evento document.ready.

Answer 7

Es una vieja pregunta, pero nunca se vuelve obsoleto. La respuesta correcta debe ser la dada por bytebrite.

Solo me gustaría señalar la diferencia entre mouseover/mouseout y mouseenter/mouseleave. Puede leer una gran explicación útil here (vaya al final de la página para ver una demostración en funcionamiento). Cuando usa mouseout, el evento se detiene cuando el mouse ingresa otro elemento, incluso si es un elemento secundario. Por otro lado, cuando usa mouseleave, el evento no se desencadena cuando el mouse pasa por encima de un elemento secundario, y este es el comportamiento que el OP desea lograr.

Answer 8

Yeap, chicos, utilice .mouseleave en lugar de .mouseout:

$('div.sort-selector').mouseleave(function() { 
    $(this).hide(); 
}); 

O incluso utilizarlo en combinación con live:

$('div.sort-selector').live('mouseleave', function() { 
    $(this).hide(); 
}); 

Answer 9

que resuelve este problema mediante la adición de pointer-events: none; en mis elementos secundarios css