Neste artigo, aprenderemos como desabilitar o evento click usando CSS.
Então vamos começar!
Como desativar o evento de clique usando CSS?
Você pode desabilitar os eventos de clique usando o CSS “ eventos de ponteiro ' propriedade. Mas, entrando nisso, vamos explicar brevemente para você.
O que é a propriedade CSS “pointer-events”?
O ' eventos de ponteiro ” controlam como os elementos HTML respondem ou se comportam ao evento de toque, como eventos de clique ou toque, estados ativos ou de foco e se o cursor está visível ou não.
Sintaxe
A sintaxe dos eventos de ponteiro é a seguinte:
eventos de ponteiro : auto | Nenhum ;
A propriedade de menção acima assume dois valores, como “ auto ' e ' Nenhum ”:
- auto: Ele é usado para executar eventos padrão.
- Nenhum: É utilizado para desabilitar eventos.
Nota: O exemplo abaixo irá demonstrar primeiramente como adicionar dois botões ativos, e então iremos desabilitar o evento click do segundo botão.
Exemplo 1: desativando o evento de clique de botões usando CSS
Neste exemplo, criaremos um cabeçalho
e dois botões. Em seguida, especifique o “ botão ” como o nome da classe do primeiro botão e atribua “ botão ' e ' botão2 ” como as classes do segundo botão.
HTML
< div >< h1 > Desativar evento de clique usando CSS < / h1 >
< botão classe = 'botão' > Botão Ativar < / botão >
< botão classe = 'botão botão2' > Botão Desativar < / botão >
< / div >
Em CSS, “ .botão ” é usado para acessar os dois botões criados no arquivo HTML. Em seguida, defina o estilo da borda como “ Nenhum ” e dê 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 : Nenhum ;
preenchimento : 25px ;
cor : rgb ( 29 , 6 , 31 ) ;
cor de fundo : rgb ( 19 , 192 , 163 ) ;
raio de borda : 5px ;
}
Depois disso, aplicaremos a pseudo-classe :active em ambos os botões como “ .button: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 na qual desativaremos o evento de clique para o segundo botão.
Para 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 {eventos de ponteiro : Nenhum ;
}
Usar a propriedade pointer-events e definir seu valor como non desabilitará o evento click, que pode ser visto na seguinte saída:
Fornecemos o método mais fácil para desabilitar o evento de clique usando CSS.
Conclusão
Para desabilitar o evento click em HTML, o “ eventos de ponteiro ” do CSS é usada. Para isso, adicione um elemento HTML e defina o valor da propriedade pointer-events como “ Nenhum ” para desabilitar seu evento de clique. Este artigo explicou como desabilitar o evento de clique usando CSS junto com seu exemplo.