Los botones generalmente se usan para realizar una acción específica. Por ejemplo, cuando haga clic en el botón agregado, activará un evento determinado. CSS nos permite deshabilitar el evento de clics. Entonces, si desea deshabilitar el evento de clic, agregue un evento de puntero en CSS y establezca su valor de acuerdo con los requisitos.

En este artículo, aprenderemos cómo deshabilitar el evento de clic usando CSS.

Entonces, comencemos!

Cómo deshabilitar el evento Haga clic con CSS?

Puede deshabilitar eventos de clic utilizando el CSS "eventos de puntero" propiedad. Pero, saltando en él, te lo explicaremos brevemente.

¿Qué es la propiedad CSS "Pointer-Events"??

El "eventos de puntero"Controle cómo los elementos HTML responden o se comportan al evento táctil, como eventos de clic o toque, estados activos o desplazados, y si el cursor es visible o no.

Sintaxis
La sintaxis de Pointer-Events es la siguiente:

Pointer-Events: Auto | Ninguno;

La propiedad de mención anterior toma dos valores, como "auto" y "ninguno":

• auto: Se usa para realizar eventos predeterminados.
• ninguno: Se utiliza para deshabilitar los eventos.

Nota: El ejemplo dado a continuación demostrará en primer lugar cómo agregar dos botones activos, y luego deshabilitaremos el evento de clic del segundo botón.

Ejemplo 1: deshabilitar el evento de clic de los botones utilizando CSS
En este ejemplo, crearemos un encabezado

y dos botones. A continuación, especifique el "botón"Como el nombre de clase del primer botón y asignar"botón" y "botón2"Como las clases del segundo botón.

Html

Desactivar el evento de clics usando CSS

Botón Habilitar
Desactivar el botón

En CSS, ".botón"Se usa para acceder a ambos botones creados en el archivo HTML. A continuación, establezca el estilo de borde como "ninguno"Y da relleno como"25px". Después de eso, configure el color del texto del botón como "RGB (29, 6, 31)"Y el fondo del botón como"RGB (19, 192, 163)". También estableceremos el radio de un botón como "5px".

CSS

.botón
borde: ninguno;
relleno: 25px;
Color: RGB (29, 6, 31);
Color de fondo: RGB (19, 192, 163);
Border-Radius: 5px;

Después de eso, aplicaremos el: pseudo-clase activo en ambos botones como ".Botón: Activo"Y configure el color del botón como"RGB (200, 255, 0)":

.botón: activo
Color de fondo: RGB (209, 65, 65);

Como resultado, verá el siguiente resultado:

Ahora, pasaremos a la siguiente parte en la que deshabilitaremos el evento de clic para el segundo botón.

Para hacerlo, use ".botón2"Para acceder al segundo botón, creado en el archivo HTML, y después de eso, establezca el valor de la propiedad de eventos de puntero como"ninguno":

.botón2
Pointer-Events: Ninguno;

El uso de la propiedad Pointer-Events y la configuración de su valor en no deshabilitará el evento Click, que se puede ver en la siguiente salida:

Hemos proporcionado el método más fácil para deshabilitar el evento de clic utilizando CSS.

Conclusión

Para deshabilitar el evento de clic en HTML, el "eventos de punteroSe utiliza la propiedad de CSS. Para este propósito, agregue un elemento HTML y establezca el valor de la propiedad de eventos de puntero como "ninguno"Para deshabilitar su evento de clics. Este artículo explicó cómo deshabilitar el evento de clic utilizando CSS junto con su ejemplo.