Πώς να χρησιμοποιήσετε τα συμβάντα του δείκτη σε JavaScript

Βασικά Takeaways

• Οι εφαρμογές Ιστού θα πρέπει να υποστηρίζουν μια σειρά συσκευών εισόδου, όχι μόνο ένα ποντίκι, για να εξυπηρετούν ένα ευρύτερο κοινό.
• Τα συμβάντα δείκτη στο JavaScript χειρίζονται συμβάντα ποντικιού και αφής, εξαλείφοντας την ανάγκη να τα εφαρμόσετε ξεχωριστά.
• Τα συμβάντα δείκτη έχουν παρόμοια ονόματα και λειτουργικότητα με τα συμβάντα του ποντικιού, καθιστώντας εύκολη την ενημέρωση του υπάρχοντος κώδικα για την υποστήριξη εισόδων αφής και πένας.

Πολλές διαδικτυακές εφαρμογές υποθέτουν ότι η συσκευή κατάδειξης ενός χρήστη θα είναι ένα ποντίκι, επομένως χρησιμοποιούν συμβάντα του ποντικιού για να χειριστούν τις αλληλεπιδράσεις. Ωστόσο, με την άνοδο των συσκευών με οθόνη αφής, οι χρήστες δεν χρειάζονται ποντίκι για να αλληλεπιδράσουν με ιστότοπους. Είναι απαραίτητο να υποστηρίζεται μια σειρά συσκευών εισόδου για να εξυπηρετεί το ευρύτερο δυνατό κοινό.

Η JavaScript έχει ένα νεότερο πρότυπο που ονομάζεται συμβάντα δείκτη. Χειρίζεται συμβάντα ποντικιού και αφής, οπότε δεν χρειάζεται να ανησυχείτε για την εφαρμογή τους ξεχωριστά.

Τι είναι τα Pointer Events;

Τα συμβάντα δείκτη είναι ένα πρότυπο Ιστού που ορίζει έναν ενοποιημένο τρόπο χειρισμού διαφορετικών μεθόδων εισαγωγής σε ένα πρόγραμμα περιήγησης ιστού, συμπεριλαμβανομένου του ποντικιού, της αφής και του στυλό. Αυτά τα συμβάντα παρέχουν έναν συνεπή και ανεξάρτητο από την πλατφόρμα τρόπο αλληλεπίδρασης με περιεχόμενο ιστού σε διαφορετικές συσκευές.

Με λίγα λόγια, τα συμβάντα δείκτη σάς βοηθούν να χειριστείτε αυτήν την ομάδα αλληλεπιδράσεων χρηστών, ανεξάρτητα από την πηγή.

Τύποι συμβάντων δείκτη

Τα συμβάντα του δείκτη ονομάζονται παρόμοια με τα συμβάντα του ποντικιού με τα οποία ίσως γνωρίζετε ήδη. Για κάθε mouseEvent στο JavaScript, υπάρχει ένα αντίστοιχο pointerEvent. Αυτό σημαίνει ότι μπορείτε να επισκεφτείτε ξανά τον παλιό σας κωδικό και να αλλάξετε το "ποντίκι" για "δείκτη" για να αρχίσετε να υποστηρίζετε εισόδους αφής και στυλό.

Ο παρακάτω πίνακας δείχνει τα διαφορετικά συμβάντα δείκτη σε σύγκριση με τα συμβάντα του ποντικιού:

Μπορείτε να δείτε ότι υπάρχουν τρία επιπλέον συμβάντα δείκτη χωρίς αντίστοιχα συμβάντα του ποντικιού. Θα μάθετε για αυτά τα γεγονότα αργότερα.

Χρήση συμβάντων δείκτη σε JavaScript

Μπορείτε να χρησιμοποιήσετε τα συμβάντα δείκτη με τον ίδιο τρόπο που χρησιμοποιείτε τα συμβάντα του ποντικιού. Όπως οι περισσότεροι χειρισμοί συμβάντων, η διαδικασία συνήθως ακολουθεί αυτό το μοτίβο:

1. Χρησιμοποιήστε έναν επιλογέα DOM για να φέρω ένα στοιχείο.
2. Χρησιμοποιώντας την addEventListener μέθοδο, καθορίστε το συμβάν που σας ενδιαφέρει και μια συνάρτηση επανάκλησης.
3. Χρησιμοποιήστε ιδιότητες και μεθόδους του επιχειρήματος της επανάκλησης, an Εκδήλωση αντικείμενο.

Ακολουθεί ένα παράδειγμα χρησιμοποιώντας το συμβάν pointermove:

// Get the target element
const target = document.getElementById('target');
// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);
// Function to handle pointer move event
functionhandlePointerMove(ev) {
// Handle the event however you want to
 target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Αυτό το μπλοκ κώδικα ορίζει ένα στοιχείο στόχο και μια συνάρτηση JavaScript να χειριστεί το μετακίνηση δείκτη συμβάν τότε χρησιμοποιεί α Ακρόαση συμβάντων JavaScript για να επισυνάψετε το συμβάν δείκτη και τη συνάρτηση στο στοιχείο προορισμού.

Χρησιμοποιώντας αυτόν τον κωδικό, ένα στοιχείο με αναγνωριστικό "στόχου" θα εμφανίσει τις συντεταγμένες του δείκτη όταν μετακινείτε τον κέρσορα, το δάχτυλο ή το στυλό σας πάνω του:

Μπορείτε να χρησιμοποιήσετε τα άλλα συμβάντα δείκτη με τον ίδιο τρόπο.

Το συμβάν ακύρωσης δείκτη

Το συμβάν ακύρωσης δείκτη ενεργοποιείται όταν διακόπτεται ένα άλλο συμβάν δείκτη πριν ολοκληρώσει τη λειτουργία του όπως είχε αρχικά προβλεφθεί. Κανονικά, το πρόγραμμα περιήγησης ακυρώνει οποιοδήποτε συμβάν δείκτη μπορεί να ήταν σε δράση στο παρελθόν. Υπάρχουν πολλοί λόγοι για τους οποίους α ακύρωση δείκτη Το συμβάν μπορεί να ενεργοποιήσει, για παράδειγμα:

• Όταν ένας χρήστης λαμβάνει μια τηλεφωνική κλήση ή κάποια άλλη ειδοποίηση διακοπής ενώ σύρει ένα στοιχείο στην οθόνη.
• Όταν αλλάξει ο προσανατολισμός της συσκευής.
• Όταν το παράθυρο του προγράμματος περιήγησης χάνει την εστίαση.
• Όταν ο χρήστης μεταβαίνει σε άλλη καρτέλα ή εφαρμογή.

Με την ακύρωση δείκτη περίπτωση, μπορείτε να χειριστείτε αυτές τις καταστάσεις όπως θέλετε. Εδώ είναι ένα παράδειγμα:

const target = document.getElementById('target');
target.addEventListener('pointercancel', (event) => {
// Handle the situation where the pointer cancels. For example, you
// can release the pointer capture
 target.releasePointerCapture(event.pointerId);
});

Λήψη δείκτη

Η καταγραφή δείκτη είναι μια δυνατότητα που επιτρέπει μια συγκεκριμένη στοιχείο HTML καταγράφει και ανταποκρίνεται σε όλα τα συμβάντα δείκτη για έναν συγκεκριμένο δείκτη, ακόμα κι αν αυτά τα συμβάντα συμβαίνουν εκτός των ορίων του στοιχείου.

Μπορείτε να ορίσετε μια σύλληψη δείκτη για ένα στοιχείο με το setpointercapture() μέθοδο και απελευθερώστε μια σύλληψη δείκτη με το releasepointercapture() μέθοδος.

ο gotpointercapture και χαμένη σύλληψη σημείου Τα συμβάντα δείκτη είναι χρήσιμα για τη λήψη δείκτη.

Η εκδήλωση gotpointercapture

ο gotpointercapture Το συμβάν ενεργοποιείται κάθε φορά που ένα στοιχείο αποκτά σύλληψη δείκτη. Μπορείτε να χρησιμοποιήσετε αυτό το συμβάν για να αρχικοποιήσετε μια κατάσταση για το στοιχείο HTML σας για τη διαχείριση συμβάντων δείκτη. Για παράδειγμα, σε μια εφαρμογή σχεδίασης, μπορείτε να χρησιμοποιήσετε gotpointercapture συμβάν για να ορίσετε την αρχική θέση του δρομέα.

Το συμβάν lostpointercapture

ο χαμένη σύλληψη σημείου Το συμβάν ενεργοποιείται όταν ένα στοιχείο χάνει τη λήψη του δείκτη. Μπορείτε να το χρησιμοποιήσετε για να καθαρίσετε ή να αφαιρέσετε οποιαδήποτε κατάσταση δημιουργήθηκε όταν το στοιχείο απέκτησε καταγραφή δείκτη. Σε μια εφαρμογή σχεδίασης, μπορεί να θέλετε να χρησιμοποιήσετε χαμένη σύλληψη σημείου για να κρύψετε τον κέρσορα.

Ιδιότητες του Pointer Events

Τα συμβάντα Pointer έχουν ιδιότητες που θα σας βοηθήσουν να κάνετε τον ιστότοπό σας πιο διαδραστικό και να ανταποκρίνεται. Οι ιδιότητες των συμβάντων του ποντικιού είναι οι ίδιες ιδιότητες που θα βρείτε στα συμβάντα δείκτη, καθώς και ορισμένες πρόσθετες ιδιότητες. Αυτό το άρθρο εξηγεί ορισμένες από τις πρόσθετες ιδιότητες.

Η ιδιότητα pointerId

ο αναγνωριστικό δείκτη είναι μια ιδιότητα συμβάντος δείκτη που σας βοηθά να αναγνωρίζετε κάθε μοναδική είσοδο δείκτη, όπως γραφίδα, δάχτυλο ή ποντίκι. Κάθε είσοδος δείκτη λαμβάνει ένα μοναδικό αναγνωριστικό (που δημιουργείται αυτόματα από το πρόγραμμα περιήγησης) που θα σας επιτρέπει να παρακολουθείτε και να εκτελείτε λειτουργίες σε αυτές.

Μια εξαιρετική χρήση για το αναγνωριστικό δείκτη Η ιδιοκτησία είναι μια εφαρμογή παιχνιδιού όπου οι χρήστες χρησιμοποιούν ταυτόχρονα πολλά δάχτυλα ή γραφίδες. ο αναγνωριστικό δείκτη Η ιδιότητα σάς επιτρέπει να παρακολουθείτε κάθε επιφάνεια δείκτη, εκχωρώντας ένα μοναδικό αναγνωριστικό σε καθεμία από αυτές. Το κύριο αναγνωριστικό εκχωρείται στην πρώτη είσοδο δείκτη.

Αυτή η ιδιότητα είναι ιδιαίτερα χρήσιμη για συσκευές αφής. Οι συσκευές που βασίζονται σε δείκτες ποντικιού μπορούν να έχουν μόνο μία είσοδο δείκτη τη φορά χωρίς να είναι συνδεδεμένη σε αυτές κάποια εξωτερική συσκευή.

Ακολουθεί ένα απλό παράδειγμα που εκτυπώνει το αναγνωριστικό κάθε εισόδου δείκτη στην κονσόλα:

const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});

Η ιδιότητα pointerType

Η ιδιότητα pointerType σάς βοηθά να διακρίνετε μεταξύ των διαφορετικών τύπων εισόδων δείκτη και σας επιτρέπει να εκτελείτε λειτουργίες βάσει αυτών. Μπορείτε να διακρίνετε ένα ποντίκι, ένα στυλό και ένα άγγιγμα με το δάχτυλο. Αυτή η ιδιότητα μπορεί να λάβει μόνο μία από τις τρεις εισόδους συμβολοσειράς: "mouse", "pen" ή "touch". Ακολουθεί ένα απλό παράδειγμα του τρόπου χρήσης του Τύπος δείκτη ιδιοκτησία:

functionhandlePointerEvent(event){
// Using the pointerType property
switch (event.pointerType) {
case'mouse':
// Handle the situation where the pointing device is a mouse
console.log(`Mouse Pointer ID: ${event.pointerId}`);
break;
case'pen':
// Handle the situation where the pointing device is a stylus
console.log(`Stylus Pointer ID: ${event.pointerId}`);
break;
case'touch':
// Handle the situation where the pointing device is a finger touch
console.log(`Touch Pointer ID: ${event.pointerId}`);
break;
default:
// Handle other pointer types or cases
console.log(`pointerType ${event.pointerType} is not supported`);
break;
 }
}
// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

Οι ιδιότητες πλάτους και ύψους

Αυτές οι ιδιότητες αντιπροσωπεύουν το πλάτος και το ύψος της περιοχής επαφής του δείκτη σε χιλιοστά. Ορισμένα προγράμματα περιήγησης δεν τα υποστηρίζουν και η τιμή τους θα είναι πάντα 1 σε τέτοια προγράμματα περιήγησης.

Μια καλή περίπτωση χρήσης για αυτές τις ιδιότητες θα είναι σε εφαρμογές που απαιτούν ακριβή είσοδο ή πρέπει να διαφοροποιήσουν τα μεγέθη διαφορετικών εισόδων. Για παράδειγμα, σε μια εφαρμογή σχεδίασης, ένα μεγαλύτερο ύψος και πλάτος μπορεί να σημαίνει ότι ο χρήστης σχεδιάζει με ευρύτερη διαδρομή και το αντίστροφο.

Τις περισσότερες φορές, πιθανότατα θα χρησιμοποιείτε τις ιδιότητες πλάτους και ύψους για συμβάντα αφής.

Χρησιμοποιήστε τα συμβάντα Pointer για περισσότερη συμμετοχή

Τα συμβάντα δείκτες σάς επιτρέπουν να καλύψετε ένα ευρύ φάσμα συσκευών και τύπων εισόδου χωρίς να ταλαιπωρηθείτε πολύ. Θα πρέπει πάντα να τα χρησιμοποιείτε στις εφαρμογές σας για να συμμορφώνονται με τα σύγχρονα πρότυπα και να βοηθούν στη δημιουργία ενός καλύτερου ιστού.