I den här artikeln kommer vi att lära oss hur du inaktiverar klickhändelsen med CSS.

Så, låt oss börja!

Hur inaktiverar man klickhändelse med CSS?

Du kan inaktivera klickhändelser med hjälp av CSS ' pointer-händelser ' fast egendom. Men, hoppa in i det, vi kommer kortfattat förklara det för dig.

Vad är 'pointer-events' CSS Property?

den ' pointer-händelser ” kontrollerar hur HTML-elementen svarar eller beter sig på beröringshändelsen, som klick- eller tryckhändelser, aktiva eller svävande tillstånd och om markören är synlig eller inte.

Syntax
Syntaxen för pekarhändelser är som följer:

Egenskapen ovan har två värden, som ' bil ' och ' ingen ”:

• bil: Den används för att utföra standardhändelser.
• ingen: Den används för att inaktivera händelser.

Notera: Exemplet nedan kommer först att visa hur man lägger till två aktiva knappar, och sedan kommer vi att inaktivera klickhändelsen för den andra knappen.

Exempel 1: Inaktivera Click Event of Buttons Using CSS
I det här exemplet kommer vi att skapa en rubrik

och två knappar. Ange sedan ' knapp ' som klassnamnet på den första knappen, och tilldela ' knapp ' och ' knapp 2 ” som klasserna för den andra knappen.

HTML

< div >
< h1 > Inaktivera klickhändelse med CSS < / h1 >
< knapp klass = 'knapp' > Aktivera knapp < / knapp >
< knapp klass = 'knapp knapp 2' > Inaktivera knapp < / knapp >
< / div >

I CSS, ' .knapp ” används för att komma åt båda knapparna som skapats i HTML-filen. Ställ sedan in kantstilen som ' ingen ' och ge utfyllnad som ' 25 px ”. Efter det, ställ in färgen på knapptexten som ' rgb(29, 6, 31) ' och knappbakgrunden som ' rgb(19, 192, 163) ”. Vi kommer också att ställa in radien för en knapp som ' 5 px ”.

CSS

.knapp {
gräns : ingen ;
stoppning : 25 px ;
Färg : rgb ( 29 , 6 , 31 ) ;
bakgrundsfärg : rgb ( 19 , 192 , 163 ) ;
gränsradie : 5 px ;
}

Efter det kommer vi att tillämpa :active pseudo-klassen på båda knapparna som ' .knapp:aktiv ' och ställ in färgen på knappen som ' rgb(200, 255, 0) ”:

.knapp : aktiva {
bakgrundsfärg : rgb ( 209 , 65 , 65 ) ;
}

Som ett resultat kommer du att se följande resultat:

Nu går vi till nästa del där vi kommer att inaktivera klickhändelsen för den andra knappen.

För att göra det, använd ' .knapp2 ' för att komma åt den andra knappen, skapad i HTML-filen, och efter det ställer du in värdet för egenskapen pointer-events som ' ingen ”:

.knapp2 {
pointer-händelser : ingen ;
}

Om du använder egenskapen pointer-events och ställer in dess värde till non kommer klickhändelsen att inaktiveras, vilket kan ses i följande utdata:

Vi har tillhandahållit den enklaste metoden för att inaktivera klickhändelsen med CSS.

Slutsats

För att inaktivera klickhändelsen i HTML, ' pointer-händelser ” egenskapen för CSS används. För detta ändamål, lägg till ett HTML-element och ställ in värdet på egenskapen pointer-events som ' ingen ” för att inaktivera dess klickhändelse. Den här artikeln förklarade hur du inaktiverar klickhändelsen med CSS tillsammans med dess exempel.