Ιδιότητα event.clientX
Η ιδιότητα event.clientX περιέχει
τις συντεταγμένες του δείκτη του ποντικιού στον άξονα X.
Για τον προσδιορισμό των συντεταγμένων υπάρχουν επίσης οι ιδιότητες
event.clientY,
event.pageX,
event.pageY.
Ας δούμε τη διαφορά μεταξύ clientX/clientY
και pageX/pageY.
Πώς λειτουργούν τα clientX και clientY:
αν έχετε ένα παράθυρο 1000 επί 1000
pixels, και το ποντίκι βρίσκεται στο κέντρο, τότε τα clientX
και clientY θα είναι και τα δύο ίσα με 500. Αν
έπειτα κάνετε κύλιση της σελίδας οριζόντια
ή κάθετα, χωρίς να μετακινήσετε τον δείκτη, τότε οι τιμές
των clientX και clientY δεν θα αλλάξουν, καθώς υπολογίζονται
σε σχέση με το παράθυρο, και όχι το έγγραφο.
Πώς λειτουργούν τα pageX και pageY:
αν έχετε ένα παράθυρο 1000 επί 1000
pixels, και ο δείκτης βρίσκεται στο κέντρο, τότε
τα pageX και pageY θα είναι ίσα με 500. Αν
έπειτα κάνετε κύλιση της σελίδας κατά 250
pixels προς τα κάτω, τότε το pageY θα γίνει ίσο με 750.
Επομένως τα pageX και pageY περιέχουν τις συντεταγμένες
του γεγονότος λαμβάνοντας υπόψη την κύλιση.
Σύνταξη
event.clientX;
Παράδειγμα
Κατά την κίνηση του ποντικιού στη σελίδα θα εμφανίζουμε
τις συντεταγμένες του σε σχέση με το παράθυρο του προγράμματος περιήγησης
(clientX και clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
