Comment simuler un clic avec JavaScript ?
Les approches suivantes peuvent être implémentées pour appliquer une simulation de clic en JavaScript :
Approche 1 : simuler un clic avec JavaScript à l'aide de l'événement onclick
Un ' sur clic ” événement se produit lorsque le bouton est enfoncé. Cette approche peut être appliquée pour invoquer une fonction lors du clic sur le bouton et incrémenter le ' nombre de clics ” chaque fois que le bouton est cliqué.
Remarque latérale : Un ' sur clic ” l'événement peut simplement être appliqué en l'associant à une fonction particulière.
Exemple
Parcourez l'extrait de code suivant :
< centre >
< style h3 = 'couleur de fond : bleu clair ;' > Cliquez sur Simulé < envergure classer = 'compter' > envergure > fois h3 >
< identifiant du bouton = 'btn1' sur clic = 'compteClic()' > Cliquez sur moi ! bouton >
centre >
- Inclure le titre spécifié avec un ' ” tag pour incrémenter le “ compter ” de clics.
- À l'étape suivante, créez un bouton avec un ' sur clic ” événement redirigeant vers la fonction countClick() qui sera accessible lors du clic sur le bouton.
Passons maintenant aux lignes de code JavaScript suivantes :
< scénario >
laisser les clics = 0 ;
fonction countClick ( ) {
clics = clics + 1 ;
document. querySelector ( '.compter' ) . textContent = clics ;
}
scénario >
Dans la partie js ci-dessus du code :
- Ici, initialisez d'abord les clics avec ' 0 ”.
- Après cela, déclarez une fonction nommée ' countClick() ”. Dans sa définition, incrémentez le « initialisé » clics ' avec ' 1 ”. Cela se traduira par une incrémentation du nombre à chaque fois que le bouton est cliqué.
- Enfin, accédez au « envergure ” élément en utilisant le “ document.querySelector() ' méthode. Aussi, appliquez le ' textContent ” propriété pour allouer le nombre de clics incrémenté discuté précédemment à l'élément span.
La sortie sera la suivante :
La fonctionnalité de la minuterie incrémentée à chaque clic peut être observée dans la sortie ci-dessus.
Approche 2 : simuler un clic avec JavaScript via la méthode addEventListener()
La ' addEventListener() ” La méthode alloue un gestionnaire d'événements à un élément. Cette méthode peut être mise en œuvre en attachant un événement spécifique à un élément et en alertant l'utilisateur lors du déclenchement de l'événement.
Syntaxe
élément. addEventListener ( événement, fonction )Dans la syntaxe donnée :
- ' un événement ” fait référence au nom de l'événement.
- ' fonction » pointe vers la fonction à exécuter lorsque l'événement se produit.
Exemple
La démonstration ci-dessous explique le concept énoncé :
< centre >< corps >< un href = '#' identifiant = 'lien' > Cliquer sur le lien un >
corps > centre >
< scénario >
être chèvre = document. getElementById ( 'lien' ) ;
obtenir. addEventListener ( 'Cliquez sur' , ( ) => alerte ( 'Cliquez sur Simulé!' ) )
scénario >
Dans le code ci-dessus :
- Tout d'abord, spécifiez un ' ancre ” tag pour inclure le lien spécifié
- Dans la partie JavaScript du code, accédez au lien créé en utilisant le ' document.getElementById() ' méthode.
- Enfin, appliquez le ' addEventListener() ' méthode à l'accédé ' lien ”. La ' Cliquez sur ” est joint dans ce cas, ce qui entraînera une alerte de l'utilisateur lorsqu'il cliquera sur le lien créé.
Production
Approche 3 : simuler un clic avec JavaScript à l'aide de la méthode click()
La ' Cliquez sur() ” effectue une simulation de clic de souris sur un élément. Cette méthode peut être utilisée pour simuler un clic directement sur les boutons attachés comme le nom l'indique.
Syntaxe
élément. Cliquez sur ( )Dans la syntaxe donnée :
- ' élément » pointe vers l'élément sur lequel le clic sera exécuté.
Exemple
L'extrait de code suivant explique le concept indiqué :
< centre >< corps >< h3 > Avez-vous trouvé cette page utile ? h3 >
< bouton onclick = 'simulerClic()' identifiant = 'simuler' > Oui bouton >
< bouton onclick = 'simulerClic()' identifiant = 'simuler' > Non bouton >
< identifiant h3 = 'tête' style = 'couleur de fond : vert clair ;' > h3 >
corps > centre >
- Tout d'abord, incluez le titre indiqué dans le '
' étiquette. - Après cela, créez deux boutons différents avec les identifiants spécifiés.
- Joignez également un ' sur clic ” événement avec les deux invoquant la fonction simulatorClick().
- À l'étape suivante, incluez un autre titre avec le ' identifiant » afin d'avertir l'utilisateur dès que le « Cliquez sur » est simulé.
Maintenant, parcourez les lignes JavaScript ci-dessous :
< scénario >fonction simulerClic ( ) {
document. getElementById ( 'simuler' ) . Cliquez sur ( )
laissez prendre = document. getElementById ( 'tête' )
obtenir. Texteintérieur = 'Cliquez sur Simulé!'
}
scénario >
- Définir une fonction ' simulerClic() ”.
- Ici, accédez aux boutons créés à l'aide de la touche ' document.getElementById() » et appliquer la méthode « Cliquez sur() » méthode pour eux.
- Maintenant, de la même manière, accédez à l'en-tête attribué et appliquez le ' Texteintérieur ” pour afficher le message indiqué sous forme d'en-tête lors du clic simulé.
Production
Dans la sortie ci-dessus, il est évident que les deux boutons créés simulent le clic.
Ce blog montre comment appliquer une simulation de clic à l'aide de JavaScript.
Conclusion
Un ' sur clic » événement, le « addEventListener() » ou la méthode « Cliquez sur() ” peut être utilisée pour simuler un clic avec JavaScript. Un ' sur clic ” peut être appliqué pour simuler un clic à chaque fois que le bouton est cliqué sous la forme d'un compteur. La ' addEventListener() ” peut être utilisée pour attacher un événement au lien et avertir l'utilisateur lors de la simulation de clic. La ' Cliquez sur() ” peut être appliquée aux boutons créés et exécute la fonctionnalité requise pour chacun des boutons. Cet article explique comment appliquer une simulation de clic en JavaScript.