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

Entonces, ¡comencemos!

¿Cómo deshabilitar el evento de clic usando CSS?

Puede deshabilitar los eventos de clic usando el CSS “ puntero-eventos ' propiedad. Pero, saltando a ello, te lo explicamos brevemente.

¿Qué es la propiedad CSS de 'eventos de puntero'?

Los ' puntero-eventos ” controla cómo los elementos HTML responden o se comportan al evento táctil, como eventos de clic o toque, estados activos o de desplazamiento, y si el cursor está visible o no.

Sintaxis
La sintaxis de los eventos de puntero es la siguiente:

La propiedad mencionada anteriormente toma dos valores, tales como “ auto ' y ' ninguna ”:

• auto: Se utiliza para realizar eventos predeterminados.
• ninguna: Se utiliza para deshabilitar eventos.

Nota: El ejemplo a continuación demostrará primero 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 usando 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 asigne “ botón ' y ' boton2 ” como las clases del segundo botón.

HTML

< división >
    < h1 > Deshabilitar evento de clic usando CSS < / h1 >
    < botón clase = 'botón' > Botón Habilitar < / botón >
    < botón clase = 'boton boton2' > Botón Deshabilitar < / botón >
< / división >

En CSS, “ .botón ” se utiliza para acceder a ambos botones creados en el archivo HTML. A continuación, establezca el estilo de borde como ' ninguna ” y dar relleno como “ 25px ”. Después de eso, establezca 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 : ninguna ;
  relleno : 25px ;
  color : RGB ( 29 , 6 , 31 ) ;
  color de fondo : RGB ( 19 , 192 , 163 ) ;
  borde-radio : 5px ;
  }

Después de eso, aplicaremos la pseudoclase :active en ambos botones como ' .botón:activo ” y establezca 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, utilice “ .boton2 ” para acceder al segundo botón, creado en el archivo HTML, y luego establecer el valor de la propiedad pointer-events como “ ninguna ”:

.boton2 {
  puntero-eventos : ninguna ;
  }

El uso de la propiedad pointer-events y el establecimiento de su valor en non deshabilitará el evento de clic, que se puede ver en el siguiente resultado:

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

Conclusión

Para deshabilitar el evento de clic en HTML, el ' puntero-eventos Se utiliza la propiedad ” de CSS. Para este propósito, agregue un elemento HTML y establezca el valor de la propiedad pointer-events como “ ninguna ” para deshabilitar su evento de clic. Este artículo explica cómo deshabilitar el evento de clic usando CSS junto con su ejemplo.