Για να προγραμματίσετε ορισμένες ενέργειες ως απάντηση στην κίνηση του δρομέα στο παράθυρο του προγράμματος περιήγησης, μερικές φορές είναι απαραίτητο να προσδιορίσετε τις συντεταγμένες του. Αυτό μπορεί να γίνει από ένα σενάριο που έχει τη δυνατότητα να παρακολουθεί συμβάντα που συμβαίνουν στο πρόγραμμα περιήγησης. Ένα σενάριο JavaScript από πελάτη έχει αυτήν την ικανότητα. Παρακάτω περιγράφεται μία από τις επιλογές για τη λήψη των συντεταγμένων του δρομέα χρησιμοποιώντας τις δυνατότητες αυτής της γλώσσας.
Οδηγίες
Βήμα 1
Χρησιμοποιήστε τις ιδιότητες του αντικειμένου συμβάντος για να λάβετε τις τρέχουσες συντεταγμένες του δρομέα. Αυτό το αντικείμενο έχει ένα ολόκληρο σύνολο ιδιοτήτων που σχετίζονται με τον προσδιορισμό των συντεταγμένων του δρομέα του ποντικιού. Η ιδιότητα LayerX περιέχει την απόσταση που μετριέται σε εικονοστοιχεία από την αριστερή άκρη του τρέχοντος επιπέδου και LayerY - την ίδια απόσταση από την κορυφή του. Αυτές οι δύο ιδιότητες έχουν συνώνυμα - αντί για event. LayerX, μπορείτε να γράψετε event.x και αντί για event. LayerY, μπορείτε να γράψετε event.y. Οι ιδιότητες pageX και pageY διατηρούν τις οριζόντιες και κατακόρυφες συντεταγμένες του δρομέα σε σχέση με την επάνω αριστερή άκρη του παραθύρου του προγράμματος περιήγησης και οι ιδιότητες screenX και screenY διατηρούν παρόμοιες τιμές σε σχέση με την οθόνη παρακολούθησης.
Βήμα 2
Προσθέστε τον έλεγχο τύπου προγράμματος περιήγησης στον κώδικά σας και χρησιμοποιήστε τις ιδιότητες clientX και clientY εκτός από τις παραπάνω ιδιότητες στο αντικείμενο συμβάντος. Αυτό είναι απαραίτητο επειδή η Microsoft χρησιμοποιεί διαφορετική ονομασία ιδιοκτησίας στο πρόγραμμα περιήγησής της στον Internet Explorer. Μπορείτε να συνδυάσετε και τις δύο προσεγγίσεις για τον προσδιορισμό συντεταγμένων, για παράδειγμα, ως εξής:
αν (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
αλλιώς εάν (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Βήμα 3
Τοποθετήστε τον κωδικό ορισμού συντεταγμένων σε μια προσαρμοσμένη συνάρτηση. Για παράδειγμα:
συνάρτηση GetMouse (evevnt) {
var coordinateX = 0, coordinateY = 0;
εάν (! evevnt) evevnt = window.event;
αν (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
αλλιώς εάν (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
επιστροφή {"coordX": coordinateX, "coordY": coordinateY};
}
Αυτή η συνάρτηση επιστρέφει έναν πίνακα με δύο ονόματα στοιχείων, το πρώτο από τα οποία (με το πλήκτρο coordX) περιέχει τη συντεταγμένη X και η δεύτερη (συντόμευση) περιέχει τη συντεταγμένη Y
Βήμα 4
Καλέστε αυτήν τη λειτουργία σε κάποιο συμβάν - για παράδειγμα, στο συμβάν μετακίνησης του ποντικιού (onmousemove) στο περιβάλλον του εγγράφου Το παρακάτω δείγμα χρησιμοποιεί μια συνάρτηση για την έξοδο των συντεταγμένων του ποντικιού στη γραμμή κατάστασης:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
