Como simular um clique com JavaScript?
As seguintes abordagens podem ser implementadas para aplicar uma simulação de clique em JavaScript:
Abordagem 1: simular um clique com JavaScript usando o evento onclick
Um ' ao clicar ” ocorre quando o botão é pressionado. Essa abordagem pode ser aplicada para invocar uma função ao clicar no botão e incrementar o “ contagem de cliques ” cada vez que o botão é clicado.
Nota: Um ' ao clicar ” pode simplesmente ser aplicado anexando-o a uma função específica.
Exemplo
Percorra o seguinte trecho de código:
< Centro >
< estilo h3 = 'cor de fundo: azul claro;' > Clique Simulado < período classe = 'contar' > período > vezes h3 >
< ID do botão = 'btn1' ao clicar = 'contarClique()' > Clique em mim ! botão >
Centro >
- Inclua o cabeçalho especificado junto com um “
” para incrementar o “ contar ” de cliques. - Na próxima etapa, crie um botão com um “ ao clicar ” redirecionando para a função countClick() que será acessada ao clicar no botão.
Agora, vamos passar pelas seguintes linhas de código JavaScript:
< roteiro >
deixe cliques = 0 ;
função contagemClique ( ) {
cliques = cliques + 1 ;
documento. querySelector ( '.contar' ) . conteúdo de texto = cliques ;
}
roteiro >
Na parte js acima do código:
- Aqui, primeiro inicialize os cliques com “ 0 ”.
- Depois disso, declare uma função chamada “ contagemClique() ”. Em sua definição, incremente o inicializado “ cliques ' com ' 1 ”. Isso resultará no aumento da contagem toda vez que o botão for clicado.
- Por fim, acesse o “ período ” elemento usando o “ document.querySelector() ” método. Além disso, aplique o “ conteúdo de texto ” para alocar a contagem de cliques incrementada discutida anteriormente para o elemento span.
A saída será a seguinte:
A funcionalidade do cronômetro incrementado a cada clique pode ser observada na saída acima.
Abordagem 2: simular um clique com JavaScript por meio do método addEventListener()
O ' addEventListener() ” método aloca um manipulador de eventos para um elemento. Esse método pode ser implementado anexando um evento específico a um elemento e alertando o usuário sobre o acionamento do evento.
Sintaxe
elemento. addEventListener ( evento, função )Na sintaxe fornecida:
- “ evento ” refere-se ao nome do evento.
- “ função ” aponta para a função a ser executada quando o evento ocorrer.
Exemplo
A demonstração abaixo explica o conceito declarado:
< Centro >< corpo >< a href = '#' Eu iria = 'link' > Clique no link uma >
corpo > Centro >
< roteiro >
ser cabra = documento. getElementById ( 'link' ) ;
pegue. addEventListener ( 'clique' , ( ) => alerta ( 'Clique Simulado!' ) )
roteiro >
No código acima:
- Em primeiro lugar, especifique um “ âncora ” para incluir o link especificado
- Na parte JavaScript do código, acesse o link criado usando o botão “ document.getElementById() ” método.
- Por fim, aplique o “ addEventListener() ” método para o acesso “ link ”. O ' clique ” é anexado neste caso, o que resultará em alertar o usuário ao clicar no link criado.
Resultado
Abordagem 3: simular um clique com JavaScript usando o método click()
O ' clique() ” executa uma simulação de clique do mouse sobre um elemento. Este método pode ser usado para simular um clique diretamente nos botões anexados como o nome especifica.
Sintaxe
elemento. clique ( )Na sintaxe dada:
- “ elemento ” aponta para o elemento no qual o clique será executado.
Exemplo
O trecho de código a seguir explica o conceito declarado:
< Centro >< corpo >< h3 > Você achou isto página útil ? h3 >
< botão ao clicar = 'simularClique()' Eu iria = 'simular' > Sim botão >
< botão ao clicar = 'simularClique()' Eu iria = 'simular' > Não botão >
< id h3 = 'cabeça' estilo = 'cor de fundo: verde claro;' > h3 >
corpo > Centro >
- Primeiro, inclua o cabeçalho indicado dentro do “
' marcação. - Depois disso, crie dois botões diferentes com os IDs especificados.
- Além disso, anexe um “ ao clicar ” com ambos invocando a função simulaClick().
- Na próxima etapa, inclua outro título com o especificado “ Eu iria ” a fim de notificar o usuário assim que o “ clique ” é simulado.
Agora, percorra as linhas de JavaScript fornecidas abaixo:
< roteiro >função simulaClick ( ) {
documento. getElementById ( 'simular' ) . clique ( )
vamos pegar = documento. getElementById ( 'cabeça' )
pegue. textointerno = 'Clique em Simulado!'
}
roteiro >
- Defina uma função “ simulaClick() ”.
- Aqui, acesse os botões criados usando o botão “ document.getElementById() ” e aplique o método “ clique() ” método para eles.
- Agora, da mesma forma, acesse o cabeçalho alocado e aplique o “ textointerno ” para exibir a mensagem declarada como um título no clique simulado.
Resultado
Na saída acima, fica evidente que ambos os botões criados simulam o clique.
Este blog demonstra como aplicar uma simulação de clique usando JavaScript.
Conclusão
Um ' ao clicar ” evento, o “ addEventListener() ” ou o método “ clique() ” pode ser utilizado para simular um clique com JavaScript. Um ' ao clicar ” pode ser aplicado para simular um clique cada vez que o botão é clicado na forma de um contador. O ' addEventListener() ” pode ser usado para anexar um evento ao link e notificar o usuário sobre a simulação do clique. O ' clique() ” pode ser aplicado aos botões criados e executa a funcionalidade necessária para cada um dos botões. Este artigo explica como aplicar uma simulação de clique em JavaScript.