Tengo un div principal con altura = 100 px que es más pequeño que el div secundario que tiene una altura = 200 px.
Cuando adjunto jquery mouseenter en parent div, el evento se activa incluso si paso el puntero sobre child (pasa el cursor sobre la parte de child que extiende la altura de parent).
¿Alguien puede explicar esto?
$(document).ready(function() { $(".parent").mouseover(function(e) { console.log(e.target); }); $(".child").mouseover(function(e) { console.log(e.target); }); $(".grandchild").mouseover(function(e) { console.log(e.target); }); }); .parent { background-color: green; height: 50px; } .child { background-color: red; height: 100px; } .grandchild { background-color: blue; height: 200px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="child"> <div class="grandchild"> Test </div> </div> </div>-- ACTUALIZACIÓN -- Al principio no me quedó claro cuál era exactamente el problema. Ahora creo que entiendo (actualicé el código).
Digamos que tenemos un div principal con width=100px y height=100px .
Luego tenemos un div secundario con width=200px y height=200px (área más grande que el padre).
Cuando paso el mouse sobre el elemento secundario ( pero aún no sobre el elemento principal ), el navegador calcula que el puntero también está sobre el elemento principal, aunque no es así.
Entonces, si tengo un controlador tanto en el elemento secundario como en el principal, se activarán ambos cuando ingrese solo al div secundario.
Gracias.
Puede evitar que el evento se propague del elemento secundario al elemento principal, de modo que no se active en el elemento principal cuando supere al elemento secundario:
$(".child").mouseover(function(e) { e.stopPropagation(); });prueba esto:
$(".child").mouseover(function(e) { e.stopImmediatePropagation(); console.log(e.isPropagationStopped()); console.log(e.currentTarget); });e.isPropagationStopped() le dice si el método e.stopImmediatePropagation(); se llama. Probé y esto funciona para mí. Y tienes que seleccionar niño en lugar de padre
usa esto en tu css. Elimina todos los eventos del mouse en el elemento secundario. (Tampoco es capaz de flotar...)
.child{pointer-events: none}"eventos de puntero: ninguno":
El elemento nunca es el objetivo de los eventos del mouse; sin embargo, los eventos del mouse pueden apuntar a sus elementos descendientes si esos descendientes tienen eventos de puntero establecidos en algún otro valor. En estas circunstancias, los eventos del mouse activarán detectores de eventos en este elemento principal según corresponda en su camino hacia/desde el descendiente durante las fases de captura/burbuja de eventos.
fuente: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events