javascript - derecho - ¿Cómo deshabilitar los eventos de mouse desencadenados por elementos secundarios?

evento click derecho javascript

Question

Déjame describir el problema en detalles:

Quiero mostrar una div posicionada absoluta al pasar el puntero 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 el elemento secundario?

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

Aquí hay 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

Es una vieja pregunta, pero nunca se vuelve obsoleta. La respuesta correcta debería ser la dada por bytebrite .

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

Answer 2

Está buscando el equivalente de jQuery del javascript que evita 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 de los niños, 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 3

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. Envolviéndolos y colocando el cursor 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 4

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á suspendida 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 5

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

La forma más sencilla de hacerlo con las versiones recientes de jQuery es utilizar el mouseenter y los eventos mouseleave lugar de mouseover y mouseout .

Puedes probar el comportamiento rápidamente con:

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

Answer 6

Para simplificar, simplemente reorganizaría un poco el html para poner el contenido recién visualizado dentro del elemento al que está vinculado 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, podrías 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 que el ejemplo sea más fácil de digerir.

Answer 7

Resolví este problema agregando pointer-events: none; en mi hijo elementos css

Answer 8

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

Funciona, pero es una gran cantidad 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
}
}

El código reducido para la legibilidad no funcionará de la caja.

Answer 9

Yeap, muchachos, usen .mouseleave lugar de .mouseout :

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

O incluso usarlo en combinación con live :

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