Os botões geralmente são usados ​​para executar uma ação específica. Por exemplo, quando você clica no botão adicionado, ele acionará um determinado evento. CSS nos permite desativar o evento de clique. Portanto, se você deseja desativar o evento de clique, adicione um evento de ponteiro no CSS e defina seu valor de acordo com os requisitos.

Neste artigo, aprenderemos a desativar o evento de clique usando CSS.

Então vamos começar!

Como desativar o evento de clique usando CSS?

Você pode desativar eventos de cliques usando o CSS “Ponteiro-eventos" propriedade. Mas, pulando nele, explicaremos brevemente para você.

O que é a propriedade CSS "Ponte-Events"?

O "Ponteiro-eventos”Controle como os elementos HTML respondem ou se comportam com o evento de toque, como clique ou tocar em eventos, estados ativos ou pairar, e se o cursor é visível ou não.

Sintaxe
A sintaxe dos eventos de ponteiro é a seguinte:

Ponteiro-eventos: Auto | Nenhum;

A propriedade mencionada acima leva dois valores, como “auto" e "nenhum”:

• auto: É usado para realizar eventos padrão.
• nenhum: É utilizado para desativar os eventos.

NOTA: O exemplo abaixo do ritmo demonstrará primeiro como adicionar dois botões ativos e, em seguida, desativaremos o evento de cliques do segundo botão.

Exemplo 1: Desativar o Evento de Clique com os botões usando CSS
Neste exemplo, criaremos um título

e dois botões. Em seguida, especifique o “botão”Como o nome da classe do primeiro botão e atribua“botão" e "Button2”Como as classes do segundo botão.

Html

Desative o evento de clique usando CSS

Botão Ativar
Desativar o botão

No CSS, “.botão”É usado para acessar os dois botões criados no arquivo html. Em seguida, defina o estilo de fronteira como “nenhum”E dê o preenchimento como“25px”. Depois disso, defina a cor do texto do botão como “RGB (29, 6, 31)”E o fundo do botão como“RGB (19, 192, 163)”. Também definiremos o raio de um botão como “5px”.

CSS

.botão
fronteira: nenhuma;
preenchimento: 25px;
Cor: RGB (29, 6, 31);
Background-Color: RGB (19, 192, 163);
Radio de fronteira: 5px;

Depois disso, aplicaremos o: pseudo-classe ativo em ambos os botões como “.Botão: ativo”E defina a cor do botão como“RGB (200, 255, 0)”:

.Botão: ativo
cor de fundo: RGB (209, 65, 65);

Como resultado, você verá o seguinte resultado:

Agora, passaremos para a próxima parte em que desativaremos o evento de clique para o segundo botão.

Para fazer isso, use “.Button2”Para acessar o segundo botão, criado no arquivo HTML e, depois disso, defina o valor da propriedade Pointer-Events como“nenhum”:

.Button2
Ponteiro-eventos: nenhum;

Usando a propriedade Pointer-Events e definir seu valor para não desativar o evento de clique, que pode ser visto na seguinte saída:

Fornecemos o método mais fácil para desativar o evento de cliques usando CSS.

Conclusão

Para desativar o evento de clique em HTML, o “Ponteiro-eventos”A propriedade do CSS é usada. Para esse fim, adicione um elemento HTML e defina o valor da propriedade Pointer-Events como “nenhum”Para desativar seu evento de clique. Este artigo explicou como desativar o evento de clique usando CSS junto com seu exemplo.