I denne artikel lærer vi, hvordan du deaktiverer klikhændelsen ved hjælp af CSS.

Så lad os starte!

Hvordan deaktiverer man klikhændelse ved hjælp af CSS?

Du kan deaktivere klikhændelser ved hjælp af CSS ' pointer-begivenheder ” ejendom. Men når vi springer ud i det, vil vi kort forklare dig det.

Hvad er 'pointer-events' CSS Property?

Det ' pointer-begivenheder ” kontrollere, hvordan HTML-elementerne reagerer eller opfører sig på berøringshændelsen, såsom klik- eller trykhændelser, aktive tilstande eller svævetilstande, og om markøren er synlig eller ej.

Syntaks
Syntaksen for pointer-hændelser er som følger:

Ovenstående egenskab har to værdier, såsom ' auto ' og ' ingen ”:

• auto: Det bruges til at udføre standardhændelser.
• ingen: Det bruges til at deaktivere begivenheder.

Bemærk: Det nedenfor givne eksempel vil først demonstrere, hvordan man tilføjer to aktive knapper, og derefter deaktiverer vi klikhændelsen for den anden knap.

Eksempel 1: Deaktivering af klikhændelse for knapper ved hjælp af CSS
I dette eksempel vil vi oprette en overskrift

og to knapper. Angiv derefter ' knap ' som klassenavnet på den første knap, og tildel ' knap ' og ' knap 2 ” som klasserne på den anden knap.

HTML

< div >
< h1 > Deaktiver klikhændelse ved hjælp af CSS < / h1 >
< knap klasse = 'knap' > Aktiver knap < / knap >
< knap klasse = 'knap knap 2' > Deaktiver knap < / knap >
< / div >

I CSS, ' .knap ” bruges til at få adgang til begge knapper oprettet i HTML-filen. Indstil derefter kantstilen som ' ingen ' og giv polstring som ' 25 px ”. Indstil derefter farven på knapteksten som ' rgb(29, 6, 31) ' og knapbaggrunden som ' rgb(19, 192, 163) ”. Vi vil også indstille radius af en knap som ' 5 px ”.

CSS

.knap {
grænse : ingen ;
polstring : 25 px ;
farve : rgb ( 29 , 6 , 31 ) ;
baggrundsfarve : rgb ( 19 , 192 , 163 ) ;
grænse-radius : 5 px ;
}

Derefter vil vi anvende :active pseudo-klassen på begge knapper som ' .knap:aktiv ' og indstil farven på knappen som ' rgb(200; 255; 0) ”:

.knap : aktiv {
baggrundsfarve : rgb ( 209 , 65 , 65 ) ;
}

Som et resultat vil du se følgende resultat:

Nu vil vi gå til næste del, hvor vi deaktiverer klikhændelsen for den anden knap.

For at gøre det skal du bruge ' .knap2 ” for at få adgang til den anden knap, oprettet i HTML-filen, og derefter indstille værdien af ​​pointer-events egenskaben som “ ingen ”:

.knap2 {
pointer-begivenheder : ingen ;
}

Brug af egenskaben pointer-events og indstilling af dens værdi til non vil deaktivere klikhændelsen, som kan ses i følgende output:

Vi har leveret den nemmeste metode til at deaktivere klikhændelsen ved hjælp af CSS.

Konklusion

For at deaktivere klikhændelsen i HTML, skal ' pointer-begivenheder ” egenskaben til CSS bruges. Til dette formål skal du tilføje et HTML-element og indstille værdien af ​​pointer-events-egenskaben som ' ingen ” for at deaktivere dens klikhændelse. Denne artikel forklarede, hvordan du deaktiverer klikhændelsen ved hjælp af CSS sammen med dets eksempel.