Compruebe si el mouse está dentro de div

3 minutos de lectura

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.

  • ¿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


o el avatar de usuario de hor
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

Avatar de usuario de GMchris
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

Avatar de usuario de M. Feyz
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

Avatar de usuario de Gautam Patadiya
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
    }
}

¿Ha sido útil esta solución?