Šajā rakstā mēs uzzināsim, kā atspējot klikšķu notikumu, izmantojot CSS.

Tātad, sākam!

Kā atspējot klikšķu notikumu, izmantojot CSS?

Klikšķu notikumus var atspējot, izmantojot CSS rādītājs-notikumi ” īpašums. Bet, iedziļinoties tajā, mēs jums to īsi paskaidrosim.

Kas ir “pointer-events” CSS rekvizīts?

' rādītājs-notikumi ” kontrolē, kā HTML elementi reaģē vai uzvedas uz pieskāriena notikumu, piemēram, noklikšķināšanas vai pieskāriena notikumus, aktīvus vai kursora novietošanas stāvokļus, un to, vai kursors ir redzams vai nē.

Sintakse
Rādītāja notikumu sintakse ir šāda:

Iepriekš minētajam īpašumam ir divas vērtības, piemēram, ' auto ' un ' neviens ”:

• auto: To izmanto noklusējuma notikumu veikšanai.
• neviens: To izmanto, lai atspējotu notikumus.

Piezīme. Tālāk sniegtajā piemērā vispirms tiks parādīts, kā pievienot divas aktīvās pogas, un pēc tam mēs atspējosim otrās pogas klikšķi.

1. piemērs. Pogu klikšķu notikuma atspējošana, izmantojot CSS
Šajā piemērā mēs izveidosim virsrakstu

un divas pogas. Pēc tam norādiet “ pogu ' kā pirmās pogas klases nosaukumu un piešķiriet ' pogu ' un ' poga 2 ” kā otrās pogas klases.

HTML

< div >
< h1 > Atspējot Click Event, izmantojot CSS < / h1 >
< pogu klasē = 'poga' > Poga Iespējot < / pogu >
< pogu klasē = 'pogas poga2' > Atspējošanas poga < / pogu >
< / div >

CSS, ' .poga ” tiek izmantots, lai piekļūtu abām HTML failā izveidotajām pogām. Pēc tam iestatiet apmales stilu kā ' neviens ' un piešķiriet polsterējumu kā ' 25 pikseļi ”. Pēc tam iestatiet pogas teksta krāsu kā ' rgb(29, 6, 31) ' un pogas fons kā ' rgb(19, 192, 163) ”. Mēs arī iestatīsim pogas rādiusu kā ' 5 pikseļi ”.

CSS

.poga {
robeža : neviens ;
polsterējums : 25 pikseļi ;
krāsa : rgb ( 29 , 6 , 31 ) ;
fona krāsa : rgb ( 19 , 192 , 163 ) ;
robeža-rādiuss : 5 pikseļi ;
}

Pēc tam mēs abām pogām izmantosim :active pseidoklasi kā “ .button:active ” un iestatiet pogas krāsu kā „ rgb(200, 255, 0) ”:

.poga : aktīvs {
fona krāsa : rgb ( 209 , 65 , 65 ) ;
}

Rezultātā jūs redzēsit šādu rezultātu:

Tagad mēs pāriesim uz nākamo daļu, kurā mēs atspējosim klikšķa notikumu otrajai pogai.

Lai to izdarītu, izmantojiet ' .poga2 ', lai piekļūtu otrajai pogai, kas izveidota HTML failā, un pēc tam iestatiet rekvizīta pointer-events vērtību kā ' neviens ”:

.poga2 {
rādītājs-notikumi : neviens ;
}

Izmantojot rekvizītu pointer-events un iestatot tā vērtību uz non, klikšķa notikums tiks atspējots, ko var redzēt šādā izvadā:

Mēs esam nodrošinājuši vienkāršāko metodi klikšķu notikuma atspējošanai, izmantojot CSS.

Secinājums

Lai atspējotu klikšķa notikumu HTML, “ rādītājs-notikumi ” tiek izmantots CSS īpašums. Šim nolūkam pievienojiet HTML elementu un iestatiet rekvizīta pointer-events vērtību kā ' neviens ”, lai atspējotu tā klikšķa notikumu. Šajā rakstā ir paskaidrots, kā atspējot klikšķa notikumu, izmantojot CSS, kā arī tā piemēru.