Explication détaillée de js pour obtenir la position de la souris, compétences example_javascript

L'exemple de cet article décrit la méthode d'obtention de la position de la souris en js. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

L'utilisation de javascript pour obtenir la position de la souris (curseur) sur la page actuelle est utilisée dans de nombreuses situations, telles que le glisser-déposer, l'info-bulle, etc. Bien sûr, nous devons encore faire face à des problèmes de compatibilité des navigateurs ici. Différents navigateurs gèrent ces attributs associés différemment. Voici une introduction détaillée aux différences et aux solutions finales lorsque les navigateurs gèrent ces attributs.

Le code Javascript est le suivant :

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>

Comment utiliser :

document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
}

La description détaillée du code est la suivante :

Nous devons d'abord déclarer un objet evnet. Quel que soit le mouvement, le clic, la pression sur une touche, etc., un evnet sera activé dans Internet Explorer, l'événement est une variable globale et sera stocké dans window.event. Sous Firefox ou autres navigateurs, l'événement sera obtenu par la fonction correspondante. Lorsque nous attribuons la fonction mouseMove à document.onmousemove, mouseMove obtiendra l'événement de mouvement de la souris.

Pour que ev obtienne l'événement event dans tous les navigateurs, "||window.event" ne fonctionnera pas sous Firefox car ev a déjà une valeur attribuée. Dans MSIE, ev est vide, vous obtenez donc window.event .

Parce que nous devons obtenir la position de la souris plusieurs fois dans cet article, nous avons conçu une fonction mousePosition, qui contient un paramètre : event.

Parce que nous allons fonctionner sous MSIE et d'autres navigateurs, Firefox et d'autres navigateurs utilisent event.pageX et event.pageY pour représenter la position de la souris par rapport au document si vous avez une fenêtre de 500*500 et votre souris. est absolument au milieu, alors les valeurs de pageX et pageY sont toutes deux de 250, et si vous faites défiler vers le bas 500, alors pageY deviendra 750.

MSIE est tout le contraire. Il utilise event.clientX et event.clientY pour indiquer que la souris équivaut à la position de la fenêtre, pas au document. Dans le même exemple, si vous faites défiler vers le bas 500, clientY vaut toujours 250, nous devons donc ajouter les propriétés scrollLeft et scrollTop relatives au document. Enfin, les documents dans MSIE ne commencent pas à 0,0, mais ont généralement une petite bordure (généralement 2 pixels). La taille de la bordure est définie dans document.body.clientLeft et clientTop. Nous les ajoutons également.

Code complet :

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
   if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
   }
   return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop - document.body.clientTop
   };
}
document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
   document.getElementByIdx('mouseXPosition').value = mousePos.x;
   document.getElementByIdx('mouseYPosition').value = mousePos.y;
}
</script>

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.