Compruebe si el elemento se hizo clic en JavaScript

Mientras crean formularios, los programadores pueden querer agregar una restricción en el botón Enviar cuando se hacen clic varias veces, y a veces hay algunas situaciones en las que los programadores deben verificar si se hace clic en el botón o no, como durante las pruebas. Para hacerlo, use el evento de clic en el elemento con la ayuda del oyente del evento.

Este tutorial demostrará cómo verificar el elemento ya se hace clic en JavaScript.

Cómo verificar si se hizo clic en el elemento usando JavaScript?

Para verificar si se hace clic en un elemento, asocie el oyente de eventos de clic con el elemento después de obtener la referencia del elemento utilizando el método getElementById ().

Veamos algunos ejemplos para una comprensión clara.

Ejemplo 1: verifique si el elemento ya estaba hecho clic
En el archivo HTML, primero, cree un formulario simple con un campo de texto de entrada y un botón:

Cree un botón de envío con la identificación "entregar"Eso se utilizará para acceder a la referencia del botón en JavaScript:

Entregar

En el archivo JavaScript, agregue el código dado a continuación:

var submitButton = documento.getElementById ('enviar');
Deje botón de clic = falso;
botón de enviar.addEventListener ('hacer clic', function handLecLick ()
consola.log (se hace clic en el botón de enviar ');
if (ButtonClicked)
consola.log ('El botón Enviar ya ha hecho clic');

Buttonclicked = True;
);

En el bloque de código anterior:

• Primero, obtenga la referencia del botón usando el "getElementById ()" método.
• Crear una variable "botón de botón"Y establecerlo como"FALSO".
• Llama a "addEventListener ()"Que manejará el evento de clic definiendo el"handleclick ()" función.
• Imprima el mensaje en el primer botón y haga clic en la función definida.
• Cuando vuelva a hacer clic en el mismo botón, imprima el mensaje "El botón Enviar ya ha hecho clic".
• Cambiar el estado del "botón de botón"Propiedad a"verdadero".

La salida para el código dado será el siguiente:

Ejemplo 2: restringir el botón Haga clic después de un solo clic
Para restringir el botón Enviar clic, escriba el código proporcionado a continuación en el archivo JavaScript o la etiqueta:

var submitButton = documento.getElementById ('enviar');
Deje botón de clic = falso;
botón de enviar.addEventListener ('hacer clic', function handLecLick ()
if (ButtonClicked)
devolver;

consola.log (se hace clic en el botón de enviar ');
Buttonclicked = True;
);

En el código anterior:

• Primero, obtenga la referencia del botón Enviar utilizando su ID asignada con la ayuda del "getElementById ()" método.
• Crear una nueva variable llamada "botón de botón"Y asignar su valor a"FALSO".
• En el "addEventListener ()"Método, defina una función llamada"handleclick ()"Para manejar hacer clic en los eventos.
• Después de hacer clic en el botón, configure el valor del "botón de botón"Propiedad a"verdadero".

En este escenario, cuando se haga clic en el botón por primera vez, se mostrará el mensaje agregado. En el otro caso, no pasará nada al hacer clic en el mismo botón una y otra vez:

En esta publicación se proporciona toda la información necesaria relacionada con la verificación si el elemento ya se hace clic en JavaScript.

Conclusión

Para verificar el elemento ya se hace clic, use el método addEventListener () en el elemento después de obtener la referencia del elemento utilizando el método GetElementById (). Además, el valor de la propiedad marcada del botón también puede ayudar a este respecto. Este tutorial describió el procedimiento para verificar si el elemento ya se hace clic en JavaScript.