Come simulare un clic con JavaScript?
I seguenti approcci possono essere implementati per applicare una simulazione di clic in JavaScript:
Approccio 1: simula un clic con JavaScript utilizzando l'evento onclick
Un ' al clic L'evento ” si verifica quando si preme il pulsante. Questo approccio può essere applicato per richiamare una funzione al clic del pulsante e incrementare il ' conteggio clic ” ogni volta che si fa clic sul pulsante.
Nota a margine: Un ' al clic L'evento può essere semplicemente applicato allegandolo con una particolare funzione.
Esempio
Esamina il seguente frammento di codice:
< centro >
< stile h3 = 'colore di sfondo: azzurro;' > Fare clic su Simulato < span classe = 'contare' > span > volte h3 >
< ID pulsante = 'btn1' al clic = 'contaclic()' > Cliccami ! pulsante >
centro >
- Includere l'intestazione specificata insieme a un ' ” tag per incrementare il “ contare ' di clic.
- Nel passaggio successivo, crea un pulsante con un ' al clic ” reindirizzamento dell'evento alla funzione countClick() a cui si accederà al clic del pulsante.
Ora, esaminiamo le seguenti righe di codice JavaScript:
< copione >
lascia clic = 0 ;
funzione conteggioClic ( ) {
clic = clic + 1 ;
documento. querySelector ( '.contare' ) . textContent = clic ;
}
copione >
Nella parte js sopra del codice:
- Qui, innanzitutto inizializza i clic con ' 0 ”.
- Successivamente, dichiara una funzione denominata ' contaclic() ”. Nella sua definizione, incrementa l'inizializzato ' clic ' insieme a ' 1 ”. Ciò comporterà l'incremento del conteggio ogni volta che si fa clic sul pulsante.
- Infine, accedi al “ span ” elemento utilizzando il “ documento.querySelector() ' metodo. Inoltre, applica il ' textContent ” per allocare il numero di clic incrementato discusso in precedenza all'elemento span.
L'output sarà il seguente:
La funzionalità del timer incrementato ad ogni clic può essere osservata nell'output sopra.
Approccio 2: simula un clic con JavaScript tramite il metodo addEventListener()
Il ' addEventListener() Il metodo ” assegna un gestore di eventi a un elemento. Questo metodo può essere implementato allegando un evento specifico a un elemento e avvisando l'utente del trigger dell'evento.
Sintassi
elemento. addEventListener ( evento, funzione )Nella sintassi data:
- “ evento ' si riferisce al nome dell'evento.
- “ funzione ” indica la funzione da eseguire quando si verifica l'evento.
Esempio
La dimostrazione riportata di seguito spiega il concetto dichiarato:
< centro >< corpo >< a href = '#' id = 'collegamento' > Clicca il link un >
corpo > centro >
< copione >
essere capra = documento. getElementById ( 'collegamento' ) ;
ottenere. addEventListener ( 'clic' , ( ) => mettere in guardia ( 'Fai clic su Simulato!' ) )
copione >
Nel codice sopra:
- Innanzitutto, specifica un ' ancora ” per includere il collegamento specificato
- Nella parte JavaScript del codice, accedi al collegamento creato utilizzando il ' documento.getElementById() ' metodo.
- Infine, applica il ' addEventListener() ” metodo per l'accesso “ collegamento ”. Il ' clic In questo caso viene allegato un evento che comporterà l'avviso dell'utente quando fa clic sul collegamento creato.
Produzione
Approccio 3: Simula un clic con JavaScript utilizzando il metodo click()
Il ' clic() Il metodo ” esegue una simulazione del clic del mouse su un elemento. Questo metodo può essere utilizzato per simulare un clic direttamente sui pulsanti collegati come specificato dal nome.
Sintassi
elemento. clic ( )Nella sintassi data:
- “ elemento ” indica l'elemento su cui verrà eseguito il clic.
Esempio
Il seguente frammento di codice spiega il concetto dichiarato:
< centro >< corpo >< h3 > Hai trovato questo pagina utile ? h3 >
< pulsante al clic = 'simulaClic()' id = 'simulare' > sì pulsante >
< pulsante al clic = 'simulaClic()' id = 'simulare' > No pulsante >
< h3 id = 'testa' stile = 'colore di sfondo: verde chiaro;' > h3 >
corpo > centro >
- Innanzitutto, includi l'intestazione dichiarata all'interno del '
etichetta '. - Successivamente, crea due pulsanti diversi con gli ID specificati.
- Inoltre, allegare un ' al clic ” con entrambi che invocano la funzione simulaClick().
- Nel passaggio successivo, includi un'altra intestazione con il ' id ” al fine di avvisare l'utente non appena il “ clic ” è simulato.
Ora, passa attraverso le righe JavaScript indicate di seguito:
< copione >funzione simulaClic ( ) {
documento. getElementById ( 'simulare' ) . clic ( )
lasciami prendere = documento. getElementById ( 'testa' )
ottenere. innerText = 'Fai clic su Simulato!'
}
copione >
- Definire una funzione ' simulaClic() ”.
- Qui, accedi ai pulsanti creati utilizzando il pulsante ' documento.getElementById() ” metodo e applicare il “ clic() ” metodo per loro.
- Ora, allo stesso modo, accedi all'intestazione assegnata e applica il ' innerText ” per visualizzare il messaggio indicato come intestazione al clic simulato.
Produzione
Nell'output sopra, è evidente che entrambi i pulsanti creati simulano il clic.
Questo blog mostra come applicare una simulazione di clic utilizzando JavaScript.
Conclusione
Un ' al clic ” evento, il “ addEventListener() ” o il “ clic() Il metodo ” può essere utilizzato per simulare un clic con JavaScript. Un ' al clic ” può essere applicato per simulare un clic ogni volta che si fa clic sul pulsante sotto forma di contatore. Il ' addEventListener() Il metodo ” può essere utilizzato per allegare un evento al collegamento e notificare all'utente la simulazione del clic. Il ' clic() ” può essere applicato ai pulsanti creati ed esegue la funzionalità richiesta per ciascuno dei pulsanti. Questo articolo spiega come applicare una simulazione di clic in JavaScript.