Ιδιότητα event.pageY
Η ιδιότητα event.pageY περιέχει τις
συντεταγμένες του δείκτη του ποντικιού στον άξονα Y.
Για τον προσδιορισμό των συντεταγμένων υπάρχουν επίσης οι ιδιότητες
event.clientX,
event.clientY,
event.pageX.
Ας δούμε τη διαφορά μεταξύ 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.pageY;
Παράδειγμα
Κατά την κίνηση του ποντικιού στη σελίδα, θα εμφανίζουμε
τις συντεταγμένες του σε σχέση με το παράθυρο του προγράμματος περιήγησης
(pageX και pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
