I denne artikkelen vil vi lære hvordan du deaktiverer klikkhendelsen ved hjelp av CSS.

Så la oss begynne!

Hvordan deaktivere klikkhendelse ved hjelp av CSS?

Du kan deaktivere klikkhendelser ved å bruke CSS ' peker-hendelser ' eiendom. Men, hopper inn i det, vil vi kort forklare det for deg.

Hva er 'pekerhendelser' CSS-eiendom?

« peker-hendelser ” kontrollerer hvordan HTML-elementene reagerer eller oppfører seg på berøringshendelsen, for eksempel klikk- eller trykkhendelser, aktive eller svevetilstander, og om markøren er synlig eller ikke.

Syntaks
Syntaksen til pekerhendelser er som følger:

Egenskapen ovenfor har to verdier, for eksempel ' auto ' og ' ingen ':

• auto: Den brukes til å utføre standardhendelser.
• ingen: Den brukes til å deaktivere hendelser.

Merk: Eksempelet nedenfor vil først demonstrere hvordan du legger til to aktive knapper, og deretter vil vi deaktivere klikkhendelsen til den andre knappen.

Eksempel 1: Deaktivering av klikkhendelse for knapper som bruker CSS
I dette eksemplet vil vi lage en overskrift

og to knapper. Deretter spesifiser ' knapp ' som klassenavnet på den første knappen, og tilordne ' knapp ' og ' knapp 2 ” som klassene til den andre knappen.

HTML

< div >
< h1 > Deaktiver klikkhendelse ved hjelp av CSS < / h1 >
< knapp klasse = 'knapp' > Aktiver-knapp < / knapp >
< knapp klasse = 'knapp knapp 2' > Deaktiver-knapp < / knapp >
< / div >

I CSS, ' .knapp ” brukes for å få tilgang til begge knappene som er opprettet i HTML-filen. Deretter setter du kantstilen som ' ingen ' og gi utfylling som ' 25 piksler '. Deretter setter du fargen på knappeteksten som ' rgb(29, 6, 31) ' og knappebakgrunnen som ' rgb(19, 192, 163) '. Vi vil også sette radiusen til en knapp som ' 5 px '.

CSS

.knapp {
grense : ingen ;
polstring : 25 piksler ;
farge : rgb ( 29 , 6 , 31 ) ;
bakgrunnsfarge : rgb ( 19 , 192 , 163 ) ;
grense-radius : 5 px ;
}

Etter det vil vi bruke :active pseudo-klassen på begge knappene som ' .knapp:aktiv ' og angi fargen på knappen som ' rgb(200; 255; 0) ':

.knapp : aktiv {
bakgrunnsfarge : rgb ( 209 , 65 , 65 ) ;
}

Som et resultat vil du se følgende utfall:

Nå vil vi gå til neste del der vi vil deaktivere klikkhendelsen for den andre knappen.

For å gjøre det, bruk ' .knapp2 ' for å få tilgang til den andre knappen, opprettet i HTML-filen, og deretter angi verdien for pointer-events-egenskapen som ' ingen ':

.knapp2 {
peker-hendelser : ingen ;
}

Ved å bruke egenskapen pointer-events og sette verdien til non vil klikkhendelsen deaktiveres, som kan sees i følgende utdata:

Vi har gitt den enkleste metoden for å deaktivere klikkhendelsen ved hjelp av CSS.

Konklusjon

For å deaktivere klikkhendelsen i HTML, ' peker-hendelser ” egenskapen til CSS brukes. For dette formålet legger du til et HTML-element og setter verdien til pointer-events-egenskapen som ' ingen ' for å deaktivere klikkhendelsen. Denne artikkelen forklarte hvordan du deaktiverer klikkhendelsen ved hjelp av CSS sammen med eksempelet.