Πώς να προσομοιώσετε ένα κλικ με JavaScript;
Οι ακόλουθες προσεγγίσεις μπορούν να εφαρμοστούν για την εφαρμογή μιας προσομοίωσης κλικ σε JavaScript:
Προσέγγιση 1: Προσομοίωση κλικ με JavaScript χρησιμοποιώντας το συμβάν onclick
ένα ' στο κλικ Το συμβάν εμφανίζεται όταν πατηθεί το κουμπί. Αυτή η προσέγγιση μπορεί να εφαρμοστεί για να καλέσετε μια συνάρτηση με το κλικ στο κουμπί και να αυξήσετε το ' καταμέτρηση κλικ ” κάθε φορά που κάνετε κλικ στο κουμπί.
Υποσημείωση: ένα ' στο κλικ Το συμβάν μπορεί απλώς να εφαρμοστεί επισυνάπτοντάς το με μια συγκεκριμένη λειτουργία.
Παράδειγμα
Μεταβείτε στο ακόλουθο απόσπασμα κώδικα:
< κέντρο >
< στυλ h3 = 'χρώμα φόντου: ανοιχτό μπλε;' > Κάντε κλικ στην Προσομοίωση < σπιθαμή τάξη = 'μετρώ' σπιθαμή > φορές h3 >
< αναγνωριστικό κουμπιού = 'btn1' στο κλικ = 'countClick()' > Κάντε κλικ στο Me ! κουμπί >
κέντρο >
- Συμπεριλάβετε την καθορισμένη επικεφαλίδα μαζί με ένα ' ' tag για να αυξήσετε το ' μετρώ ” των κλικ.
- Στο επόμενο βήμα, δημιουργήστε ένα κουμπί με συνημμένο ' στο κλικ Ανακατεύθυνση συμβάντος στη συνάρτηση countClick() στην οποία θα έχετε πρόσβαση με το πάτημα του κουμπιού.
Τώρα, ας περάσουμε από τις ακόλουθες γραμμές κώδικα JavaScript:
< γραφή >
αφήστε κλικ = 0 ;
λειτουργία countClick ( ) {
κλικ = κλικ + 1 ;
έγγραφο. querySelector ( '.μετρώ' ) . περιεχόμενο κειμένου = κλικ ;
}
γραφή >
Στο παραπάνω τμήμα js του κώδικα:
- Εδώ, αρχικοποιήστε πρώτα τα κλικ με ' 0 '.
- Μετά από αυτό, δηλώστε μια συνάρτηση με το όνομα ' countClick() '. Στον ορισμό του, αυξήστε το αρχικοποιημένο ' κλικ ' με ' 1 '. Αυτό θα έχει ως αποτέλεσμα την αύξηση της μέτρησης κάθε φορά που κάνετε κλικ στο κουμπί.
- Τέλος, αποκτήστε πρόσβαση στο ' σπιθαμή ' στοιχείο χρησιμοποιώντας το ' document.querySelector() 'μέθοδος. Επίσης, εφαρμόστε το « περιεχόμενο κειμένου ιδιότητα για την εκχώρηση του αυξημένου αριθμού κλικ που συζητήθηκε προηγουμένως στο στοιχείο span.
Η έξοδος θα είναι η εξής:
Η λειτουργικότητα του αυξανόμενου χρονοδιακόπτη σε κάθε κλικ μπορεί να παρατηρηθεί στην παραπάνω έξοδο.
Προσέγγιση 2: Προσομοίωση κλικ με JavaScript μέσω της μεθόδου addEventListener()
Ο ' addEventListener() Η μέθοδος ” εκχωρεί έναν χειριστή συμβάντων σε ένα στοιχείο. Αυτή η μέθοδος μπορεί να εφαρμοστεί επισυνάπτοντας ένα συγκεκριμένο συμβάν σε ένα στοιχείο και ειδοποιώντας τον χρήστη σχετικά με την ενεργοποίηση του συμβάντος.
Σύνταξη
στοιχείο. addEventListener ( εκδήλωση, λειτουργία )Στη δεδομένη σύνταξη:
- ' Εκδήλωση ” αναφέρεται στο όνομα του συμβάντος.
- ' λειτουργία ” δείχνει τη συνάρτηση που πρέπει να εκτελεστεί όταν συμβεί το συμβάν.
Παράδειγμα
Η παρακάτω επίδειξη εξηγεί τη δηλωθείσα έννοια:
< κέντρο >< σώμα >< ένα href = '#' ταυτότητα = 'Σύνδεσμος' > Κάντε κλικ στον σύνδεσμο ένα >
σώμα κέντρο >
< γραφή >
να είσαι κατσίκα = έγγραφο. getElementById ( 'Σύνδεσμος' ) ;
παίρνω. addEventListener ( 'Κάντε κλικ' , ( ) => συναγερμός ( 'Κάντε κλικ στην Προσομοίωση!' ) )
γραφή >
Στον παραπάνω κώδικα:
- Αρχικά, καθορίστε ένα ' άγκυρα ετικέτα για να συμπεριλάβετε τον καθορισμένο σύνδεσμο
- Στο τμήμα JavaScript του κώδικα, αποκτήστε πρόσβαση στον σύνδεσμο που δημιουργήθηκε χρησιμοποιώντας το ' document.getElementById() 'μέθοδος.
- Τέλος, εφαρμόστε το « addEventListener() 'μέθοδος για την πρόσβαση' Σύνδεσμος '. Ο ' Κάντε κλικ Το συμβάν επισυνάπτεται σε αυτήν την περίπτωση, το οποίο θα έχει ως αποτέλεσμα την ειδοποίηση του χρήστη όταν κάνει κλικ στον δημιουργημένο σύνδεσμο.
Παραγωγή
Προσέγγιση 3: Προσομοίωση κλικ με JavaScript Χρησιμοποιώντας τη μέθοδο click().
Ο ' Κάντε κλικ() Η μέθοδος εκτελεί μια προσομοίωση κλικ του ποντικιού σε ένα στοιχείο. Αυτή η μέθοδος μπορεί να χρησιμοποιηθεί για την προσομοίωση ενός κλικ απευθείας στα συνημμένα κουμπιά, όπως καθορίζει το όνομα.
Σύνταξη
στοιχείο. Κάντε κλικ ( )Στη δεδομένη σύνταξη:
- ' στοιχείο ” δείχνει το στοιχείο πάνω στο οποίο θα εκτελεστεί το κλικ.
Παράδειγμα
Το ακόλουθο απόσπασμα κώδικα εξηγεί τη δηλωμένη έννοια:
< κέντρο >< σώμα >< h3 > Βρήκες Αυτό σελίδα χρήσιμη ? h3 >
< κουμπί κάνοντας κλικ = 'simulateClick()' ταυτότητα = 'προσποιούμαι' > Ναί κουμπί >
< κουμπί κάνοντας κλικ = 'simulateClick()' ταυτότητα = 'προσποιούμαι' > Όχι κουμπί >
< h3 id = 'κεφάλι' στυλ = 'χρώμα φόντου: ανοιχτό πράσινο;' h3 >
σώμα κέντρο >
- Αρχικά, συμπεριλάβετε την αναφερόμενη επικεφαλίδα στο ' <κέντρο> ετικέτα '.
- Μετά από αυτό, δημιουργήστε δύο διαφορετικά κουμπιά με τα καθορισμένα αναγνωριστικά.
- Επίσης, επισυνάψτε ένα ' στο κλικ Συμβάν και με τα δύο να καλούν τη συνάρτηση simulateClick().
- Στο επόμενο βήμα, συμπεριλάβετε μια άλλη επικεφαλίδα με το καθορισμένο ' ταυτότητα ' προκειμένου να ειδοποιηθεί ο χρήστης μόλις το ' Κάντε κλικ ” προσομοιώνεται.
Τώρα, περάστε από τις παρακάτω γραμμές JavaScript:
< γραφή >λειτουργία προσομοίωσηςΚλικ ( ) {
έγγραφο. getElementById ( 'προσποιούμαι' ) . Κάντε κλικ ( )
ας πάρει = έγγραφο. getElementById ( 'κεφάλι' )
παίρνω. innerText = 'Κάντε κλικ στην Προσομοίωση!'
}
γραφή >
- Ορίστε μια συνάρτηση ' simulateClick() '.
- Εδώ, αποκτήστε πρόσβαση στα κουμπιά που δημιουργήθηκαν χρησιμοποιώντας το ' document.getElementById() μέθοδος ' και εφαρμόστε το ' Κάντε κλικ() 'μέθοδος προς αυτούς.
- Τώρα, παρομοίως, αποκτήστε πρόσβαση στην εκχωρημένη επικεφαλίδα και εφαρμόστε το ' innerText ιδιότητα για εμφάνιση του δηλωμένου μηνύματος ως επικεφαλίδα στο προσομοιωμένο κλικ.
Παραγωγή
Στην παραπάνω έξοδο, είναι προφανές ότι και τα δύο δημιουργημένα κουμπιά προσομοιώνουν το κλικ.
Αυτό το ιστολόγιο δείχνει πώς να εφαρμόσετε μια προσομοίωση κλικ χρησιμοποιώντας JavaScript.
συμπέρασμα
ένα ' στο κλικ «εκδήλωση, η « addEventListener() 'μέθοδος ή η ' Κάντε κλικ() Η μέθοδος μπορεί να χρησιμοποιηθεί για την προσομοίωση ενός κλικ με JavaScript. ένα ' στο κλικ Το συμβάν μπορεί να εφαρμοστεί για την προσομοίωση ενός κλικ κάθε φορά που γίνεται κλικ στο κουμπί με τη μορφή μετρητή. Ο ' addEventListener() Η μέθοδος μπορεί να χρησιμοποιηθεί για να επισυνάψετε ένα συμβάν στον σύνδεσμο και να ειδοποιήσετε τον χρήστη κατά την προσομοίωση κλικ. Ο ' Κάντε κλικ() Η μέθοδος ” μπορεί να εφαρμοστεί στα δημιουργημένα κουμπιά και εκτελεί την απαιτούμενη λειτουργικότητα για κάθε ένα από τα κουμπιά. Αυτή η εγγραφή εξηγεί πώς να εφαρμόσετε μια προσομοίωση κλικ σε JavaScript.