Pour programmer certaines actions en réponse au mouvement du curseur dans la fenêtre du navigateur, il est parfois nécessaire de déterminer ses coordonnées. Cela peut être fait par un script qui a la capacité de suivre les événements se produisant dans le navigateur. Un script JavaScript côté client a cette capacité. Ci-dessous est décrite l'une des options permettant d'obtenir les coordonnées du curseur en utilisant les capacités de ce langage.
Instructions
Étape 1
Utilisez les propriétés de l'objet événement pour obtenir les coordonnées actuelles du curseur. Cet objet possède tout un ensemble de propriétés pertinentes pour déterminer les coordonnées du curseur de la souris. La propriété LayerX contient la distance mesurée en pixels depuis le bord gauche du calque actuel, et LayerY - la même distance depuis son bord supérieur. Ces deux propriétés ont des synonymes - au lieu de event. LayerX, vous pouvez écrire event.x, et au lieu de event. LayerY, vous pouvez écrire event.y. Les propriétés pageX et pageY contiennent les coordonnées horizontales et verticales du curseur par rapport au bord supérieur gauche de la fenêtre du navigateur, et les propriétés screenX et screenY contiennent des valeurs similaires par rapport à l'écran du moniteur.
Étape 2
Ajoutez la vérification du type de navigateur à votre code et utilisez les propriétés clientX et clientY en plus des propriétés ci-dessus sur l'objet événement. Cela est nécessaire car Microsoft utilise une désignation de propriété différente dans son navigateur Internet Explorer. Vous pouvez combiner les deux approches pour déterminer les coordonnées, par exemple, comme ceci:
si (evevnt.pageX || evevnt.pageY) {
coordonnéeX = événement.pageX;
coordonnéeY = eevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordonnéX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordonnéeY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Étape 3
Placez le code de définition des coordonnées dans une fonction personnalisée. Par exemple:
fonction GetMouse (événement) {
var coordonnéeX = 0, coordonnéeY = 0;
if (! evevnt) evevnt = window.event;
si (evevnt.pageX || evevnt.pageY) {
coordonnéeX = événement.pageX;
coordonnéeY = eevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordonnéX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordonnéeY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": coordonnéX, "coordY": coordonnéY};
}
Cette fonction renvoie un tableau de deux éléments nommés, dont le premier (avec la touche coordX) contient la coordonnée X et le second (coordY) contient la coordonnée Y.
Étape 4
Appelez cette fonction sur un événement - par exemple, sur l'événement de déplacement de la souris (onmousemove) dans le contexte du document. L'exemple ci-dessous utilise une fonction pour afficher les coordonnées de la souris dans la barre d'état:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
