web-dev-qa-db-fra.com

Vérifiez si la souris est à l'intérieur de div

Je veux utiliser une instruction if pour vérifier si la souris est à l'intérieur d'un certain div, quelque chose comme ceci:

if ( mouse is inside #element ) {
 // do something
} else {
 return;
}

Cela entraînera le démarrage de la fonction lorsque la souris est à l'intérieur de # élément et s'arrêtera lorsque la souris sera à l'extérieur de # élément.

javascriptjqueryif-statementmouseover
10
Maarten Wolfsen

vous pouvez enregistrer des gestionnaires jQuery:

var isOnDiv = false;
$(yourDiv).mouseenter(function(){isOnDiv=true;});
$(yourDiv).mouseleave(function(){isOnDiv=false;});

pas d'alternative jQuery:

document.getElementById("element").addEventListener("mouseenter", function(  ) {isOnDiv=true;});
document.getElementById("element").addEventListener("mouseout", function(  ) {isOnDiv=false;});

et quelque part ailleurs:

if ( isOnDiv===true ) {
 // do something
} else {
 return;
}
13
or hor

Eh bien, c'est un peu à quoi servent les événements. Attachez simplement un écouteur d'événement à la div que vous souhaitez surveiller.

var div = document.getElementById('myDiv');
div.addEventListener('mouseenter', function(){
  // stuff to do when the mouse enters this div
}, false);

Si vous voulez le faire en utilisant les mathématiques, vous devez toujours avoir un événement sur un élément parent ou quelque chose, pour pouvoir obtenir les coordonnées de la souris, qui seront ensuite stockées dans un objet événement, qui est transmis au rappel.

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);

Mais il vaut mieux utiliser la méthode ci-dessus.

13
GMchris

vous pouvez simplement utiliser ceci:

var element = document.getElementById("myId");
if (element.parentNode.querySelector(":hover") == element) {
    //Mouse is inside element
} else {
    //Mouse is outside element
}
2
M. Feyz