Verifique se o elemento foi clicado usando JavaScript

Ao criar formulários, os programadores podem querer adicionar uma restrição ao botão Enviar quando clicados várias vezes e, às vezes, existem algumas situações em que os programadores precisam verificar se o botão é clicado ou não, como durante o teste. Para fazer isso, use o evento de clique no elemento com a ajuda do ouvinte do evento.

Este tutorial demonstrará como verificar se o elemento já está clicado usando JavaScript.

Como verificar se o elemento foi clicado usando JavaScript?

Para verificar se um elemento foi clicado, associe o ouvinte do Evento Click com o elemento depois de obter a referência do elemento usando o método getElementById ().

Vamos verificar alguns exemplos para um entendimento claro.

Exemplo 1: verifique se o elemento já foi clicado
No arquivo html, primeiro, crie um formulário simples com um campo de texto de entrada e um botão:

Crie um botão Enviar com o ID “enviar”Isso será usado para acessar a referência do botão em JavaScript:

Enviar

No arquivo JavaScript, adicione o código abaixo:

var envia -se o documento = documento.getElementById ('submeter');
Deixe ButtonClicked = false;
botão de envio.addEventListener ('click', function handleclick ()
console.log ('o botão de envio é clicado');
if (ButtonClicked)
console.log ('o botão de envio já clicou');

ButtonClicked = true;
);

No bloco de código acima:

• Primeiro, obtenha a referência do botão usando o “getElementById ()”Método.
• Crie uma variável “ButtonClicked”E defina como“falso”.
• Ligar para "addEventListener ()”Isso lidará com o evento de cliques definindo o“handleclick ()”Função.
• Imprima a mensagem no primeiro botão e clique na função definida.
• Quando o mesmo botão for clicado novamente, imprima a mensagem “O botão de envio já clicou”.
• Altere o status do “ButtonClicked"Propriedade para"verdadeiro”.

A saída para o código fornecida será o seguinte:

Exemplo 2: restrinja o botão Clique após um único clique
Para restringir o botão enviar clique, escreva o código fornecido abaixo no arquivo JavaScript ou na tag:

var envia -se o documento = documento.getElementById ('submeter');
Deixe ButtonClicked = false;
botão de envio.addEventListener ('click', function handleclick ()
if (ButtonClicked)
retornar;

console.log ('o botão de envio é clicado');
ButtonClicked = true;
);

No código acima:

• Primeiro, obtenha a referência do botão de envio usando seu ID atribuído com a ajuda do “getElementById ()”Método.
• Crie uma nova variável chamada “ButtonClicked”E atribua seu valor a“falso”.
• No "addEventListener ()”Método, defina uma função chamada“handleclick ()”Para conseguir clicar em eventos.
• Depois que o botão é clicado, defina o valor do “ButtonClicked"Propriedade para"verdadeiro”.

Nesse cenário, quando o botão é clicado pela primeira vez, a mensagem adicionada será exibida. No outro caso, nada acontecerá ao clicar no mesmo botão repetidamente:

Todas as informações necessárias relacionadas à verificação se o elemento já estiver clicado ou não usando JavaScript é fornecido neste post.

Conclusão

Para verificar se o elemento já está clicado, use o método addEventListener () no elemento depois de obter a referência do elemento usando o método getElementById (). Além disso, o valor da propriedade verificada do botão também pode ajudar nesse sentido. Este tutorial descreveu o procedimento para verificar se o elemento já foi clicado usando JavaScript.