In dit artikel zullen we leren hoe u de klikgebeurtenis kunt uitschakelen met behulp van CSS.

Dus laten we beginnen!

Hoe klikgebeurtenis uitschakelen met CSS?

U kunt klikgebeurtenissen uitschakelen met behulp van de CSS ' pointer-events ' eigendom. Maar om er even in te springen, zullen we het je kort uitleggen.

Wat is de CSS-eigenschap 'pointer-events'?

De ' pointer-events ” bepalen hoe de HTML-elementen reageren of zich gedragen op de aanraakgebeurtenis, zoals klik- of tikgebeurtenissen, actieve of zweeftoestanden, en of de cursor zichtbaar is of niet.

Syntaxis
De syntaxis van pointer-events is als volgt:

De bovengenoemde eigenschap heeft twee waarden, zoals ' auto ' en ' geen ”:

• auto: Het wordt gebruikt om standaardgebeurtenissen uit te voeren.
• geen: Het wordt gebruikt om gebeurtenissen uit te schakelen.

Opmerking: het onderstaande voorbeeld laat eerst zien hoe u twee actieve knoppen kunt toevoegen, waarna we de klikgebeurtenis van de tweede knop uitschakelen.

Voorbeeld 1: Klikgebeurtenis van knoppen uitschakelen met CSS
In dit voorbeeld maken we een kop

en twee knoppen. Geef vervolgens de ' knop ” als de klassenaam van de eerste knop, en wijs “ knop ' en ' knop2 ” als de klassen van de tweede knop.

HTML

< div >
< h1 > Klikgebeurtenis uitschakelen met CSS < / h1 >
< knop klas = 'knop' > Knop inschakelen < / knop >
< knop klas = 'knop knop2' > Knop uitschakelen < / knop >
< / div >

In CSS, ' .knop ” wordt gebruikt om toegang te krijgen tot beide knoppen die in het HTML-bestand zijn gemaakt. Stel vervolgens de randstijl in als ' geen ” en geef opvulling als “ 25px ”. Stel daarna de kleur van de knoptekst in als ' RGB(29, 6, 31) ” en de knopachtergrond als “ RGB(19, 192, 163) ”. We zullen ook de straal van een knop instellen als ' 5px ”.

CSS

.knop {
grens : geen ;
opvulling : 25px ;
kleur : rgb ( 29 , 6 , 31 ) ;
Achtergrond kleur : rgb ( 19 , 192 , 163 ) ;
grens-radius : 5px ;
}

Daarna zullen we de :active pseudo-klasse op beide knoppen toepassen als ' .knop:actief ' en stel de kleur van de knop in als ' RGB(200, 255, 0) ”:

.knop : actief {
Achtergrond kleur : rgb ( 209 , 65 , 65 ) ;
}

Als resultaat ziet u het volgende resultaat:

Nu gaan we naar het volgende deel waarin we de klikgebeurtenis voor de tweede knop uitschakelen.

Gebruik hiervoor ' .knop2 ' om toegang te krijgen tot de tweede knop, gemaakt in het HTML-bestand, en stel daarna de waarde van de eigenschap pointer-events in als ' geen ”:

.knop2 {
pointer-events : geen ;
}

Als u de eigenschap pointer-events gebruikt en de waarde instelt op non, wordt de gebeurtenis click uitgeschakeld, wat te zien is in de volgende uitvoer:

We hebben de eenvoudigste methode gegeven om de klikgebeurtenis uit te schakelen met behulp van CSS.

Conclusie

Om de klikgebeurtenis in HTML uit te schakelen, wordt de “ pointer-events ” eigenschap van CSS wordt gebruikt. Voeg hiervoor een HTML-element toe en stel de waarde van de eigenschap pointer-events in als ' geen ” om de klikgebeurtenis uit te schakelen. In dit artikel wordt uitgelegd hoe u de klikgebeurtenis kunt uitschakelen met behulp van CSS, samen met het bijbehorende voorbeeld.