Knapper brukes vanligvis til å utføre en spesifikk handling. For eksempel, når du klikker på den ekstra knappen, vil den utløse en viss hendelse. CSS lar oss deaktivere klikkhendelsen. Så hvis du vil deaktivere klikkhendelsen, kan du legge til en pekerhendelse i CSS og angi verdien i henhold til kravene.

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

Så la oss starte!

Hvordan deaktivere klikkhendelse ved hjelp av CSS?

Du kan deaktivere klikkhendelser ved å bruke CSS “peker-hendelser”Eiendom. Men å hoppe inn i det, vil vi kort forklare det for deg.

Hva er "Pointer-Events" CSS-eiendom?

“peker-hendelser”Kontroller hvordan HTML -elementene reagerer eller oppfører seg på berøringshendelsen, for eksempel å klikke eller trykke på hendelser, aktive eller sveve stater, og om markøren er synlig eller ikke.

Syntaks
Syntaksen til pekerhendelser er som følger:

Peker-hendelser: Auto | Ingen;

Ovennevnte egenskap tar to verdier, for eksempel “bil”Og“ingen”:

• Auto: Det brukes til å utføre standardhendelser.
• ingen: Det brukes til å deaktivere hendelser.

Merk: Det undergitte eksemplet vil først demonstrere hvordan du legger til to aktive knapper, og så vil vi deaktivere klikkhendelsen til den andre knappen.

Eksempel 1: Deaktivering av klikkhendelse av knapper ved hjelp av CSS
I dette eksemplet vil vi lage en overskrift

og to knapper. Deretter spesifiser "knapp”Som klassens navn på den første knappen, og tilordne“knapp”Og“knapp2”Som klasser i den andre knappen.

Html

Deaktiver klikkhendelse ved hjelp av CSS

Aktiver knappen
Deaktiver knappen

I CSS, “.knapp”Brukes til å få tilgang til begge knappene som er opprettet i HTML -filen. Neste, sett grensestilen som “ingen”Og gi polstring som“25px”. Sett deretter fargen på knappeteksten som "etter det" som "RGB (29, 6, 31)”Og knappbakgrunnen som“RGB (19, 192, 163)”. Vi vil også angi radius for en knapp som "5px”.

CSS

.knapp
Grense: Ingen;
polstring: 25px;
Farge: RGB (29, 6, 31);
bakgrunnsfarge: RGB (19, 192, 163);
Border-Radius: 5px;

Etter det vil vi bruke: Aktiv pseudoklasse på begge knappene som ".Knapp: aktiv”Og sett 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 flytte 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 setter etter det verdien av Pointer-Events-egenskapen som“ingen”:

.knapp2
Peker-hendelser: Ingen;

Bruke egenskapen Peker-Events og sette sin verdi til ikke deaktivere klikkhendelsen, 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”Eiendom til CSS brukes. For dette formålet, legg til et HTML-element og angi verdien av pekerhendelsesegenskapen som "ingen”For å deaktivere klikkhendelsen. Denne artikkelen forklarte hvordan du deaktiverer klikkhendelsen ved hjelp av CSS sammen med eksemplet.