Quiero usar una declaración if para verificar si el mouse está dentro de un determinado div, algo como esto:
if ( mouse is inside #element ) {
// do something
} else {
return;
}
Esto dará como resultado que la función se inicie cuando el mouse esté dentro de #element y se detenga cuando el mouse esté fuera de #element.
o bien
puede registrar controladores jQuery:
var isOnDiv = false;
$(yourDiv).mouseenter(function(){isOnDiv=true;});
$(yourDiv).mouseleave(function(){isOnDiv=false;});
sin alternativa jQuery:
document.getElementById("element").addEventListener("mouseenter", function( ) {isOnDiv=true;});
document.getElementById("element").addEventListener("mouseout", function( ) {isOnDiv=false;});
y en otro lugar:
if ( isOnDiv===true ) {
// do something
} else {
return;
}
-
¡Gracias! eso es lo que estaba buscando. Es estúpido que no pudiera pensar en eso yo mismo
–Maarten Wolfsen
21 de abril de 2016 a las 10:51
-
Esto se basa en el desencadenante de esos eventos, lo que no es confiable cuando hay elementos superpuestos en el plano z.
–Max Hudson
8 sep 2017 a las 16:58
-
Esto fallará si otro elemento se coloca directamente sobre el elemento que está probando.
– Juan
27/09/2018 a las 14:33
GMchris
Bueno, para eso están los eventos. Simplemente adjunte un detector de eventos al div que desea monitorear.
var div = document.getElementById('myDiv');
div.addEventListener('mouseenter', function(){
// stuff to do when the mouse enters this div
}, false);
Si desea hacerlo usando matemáticas, aún necesita tener un evento en un elemento principal o algo así, para poder obtener las coordenadas del mouse, que luego se almacenarán en un objeto de evento, que se pasa a la devolución de llamada.
var body = document.getElementsByTagName('body');
var divRect = document.getElementById('myDiv').getBoundingClientRect();
body.addEventListener('mousemove', function(event){
if (event.clientX >= divRect.left && event.clientX <= divRect.right &&
event.clientY >= divRect.top && event.clientY <= divRect.bottom) {
// Mouse is inside element.
}
}, false);
Pero es mejor usar el método anterior.
-
¡Maldita sea, 10 minutos de depuración y atornillado, amigo! debería ser
event.clientY >= divRect.top
– escitargón
17 de abril de 2017 a las 21:19
-
lol, no, la última parte debería ser como
event.clientY <= divRect.bottom
– escitargón
17 abr 2017 a las 22:34
M. Feyz
simplemente puedes usar esto:
var element = document.getElementById("myId");
if (element.parentNode.querySelector(":hover") == element) {
//Mouse is inside element
} else {
//Mouse is outside element
}
Mejorando usando los comentarios
const element = document.getElementById("myId");
if (element.parentNode.matches(":hover")) {
//Mouse is inside element
} else {
//Mouse is outside element
}
-
En los navegadores modernos solo puedes hacer
element.matches(':hover')
– jacob
12 de agosto de 2019 a las 21:23
-
Hola, solución inteligente.
– beluga
29 de marzo de 2020 a las 19:46
-
muy inteligente 🙂
– ic3
25 de mayo de 2020 a las 19:52
-
para jquery, es
$(element).is(':hover')
–Walty Yeung
30 de septiembre de 2020 a las 5:20
-
Solución muy inteligente y fácil. Trabajó mágicamente
– Van_Paitin
19 de febrero de 2021 a las 4:26
Gautama Patadiya
$("div").mouseover(function(){
//here your stuff so simple..
});
puedes hacer algo como esto
var flag = false;
$("div").mouseover(function(){
flag = true;
testing();
});
$("div").mouseout(function(){
flag = false;
testing();
});
function testing(){
if(flag){
//mouse hover
}else{
//mouse out
}
}
¿Por qué no conectar un controlador de eventos a
mouseenter
/mouseover
para el elemento que necesita?–Rory McCrossan
21 de abril de 2016 a las 10:45
Posiblemente podrías hacerlo usando
getElementFromPoint()
pero conectarse directamente al evento en el elemento sería más confiable y una mejor práctica en mi opinión.–Rory McCrossan
21 de abril de 2016 a las 10:51