Sellest artiklist õpime, kuidas CSS-i abil klikisündmust keelata.

Niisiis, alustame!

Kuidas CSS-i abil klõpsamissündmust keelata?

Klikisündmused saate keelata, kasutades CSS-i ' osuti-sündmused ” vara. Kuid sellesse hüpates selgitame teile seda lühidalt.

Mis on „pointer-events” CSS-i atribuut?

' osuti-sündmused ” saate juhtida, kuidas HTML-elemendid reageerivad või käituvad puutesündmusele (nt klõpsamis- või puudutussündmused, aktiivsed või hõljutavad olekud) ja seda, kas kursor on nähtav või mitte.

Süntaks
Osutisündmuste süntaks on järgmine:

Ülaltoodud atribuudil on kaks väärtust, näiteks ' auto ” ja „ mitte ühtegi ”:

• auto: Seda kasutatakse vaikesündmuste läbiviimiseks.
• mitte ühtegi: Seda kasutatakse sündmuste keelamiseks.

Märkus. Allpool toodud näide demonstreerib esmalt, kuidas lisada kaks aktiivset nuppu ja seejärel keelame teise nupu klõpsamise.

Näide 1: CSS-i abil nuppude klõpsamise sündmuse keelamine
Selles näites loome pealkirja

ja kaks nuppu. Järgmisena määrake ' nuppu ' esimese nupu klassinimena ja määrake ' nuppu ” ja „ nupp2 ” kui teise nupu klassid.

HTML

< div >
< h1 > Keela CSS-i abil klõpsamissündmus < / h1 >
< nuppu klass = 'nupp' > Lubamisnupp < / nuppu >
< nuppu klass = 'nupu nupp2' > Keela nupp < / nuppu >
< / div >

CSS-is ' .nupp ” kasutatakse mõlema HTML-failis loodud nupu juurdepääsuks. Järgmisena määrake äärise stiiliks ' mitte ühtegi ' ja andke polsterdus kui ' 25 pikslit ”. Pärast seda määrake nupu teksti värviks ' rgb(29, 6, 31) ” ja nupu taust on „ rgb(19, 192, 163) ”. Samuti määrame nupu raadiuseks ' 5 pikslit ”.

CSS

.nupp {
piir : mitte ühtegi ;
polsterdus : 25 pikslit ;
värvi : rgb ( 29 , 6 , 31 ) ;
taustavärv : rgb ( 19 , 192 , 163 ) ;
piiri raadius : 5 pikslit ;
}

Pärast seda rakendame mõlemale nupule :active pseudoklassi kui ' .button:aktiivne ja määrake nupu värviks ' rgb(200, 255, 0) ”:

.nupp : aktiivne {
taustavärv : rgb ( 209 , 65 , 65 ) ;
}

Selle tulemusena näete järgmist tulemust:

Nüüd liigume järgmise osa juurde, milles keelame teise nupu klõpsamise sündmuse.

Selleks kasutage ' .nupp2 ”, et pääseda juurde teisele HTML-failis loodud nupule ja seejärel määrata atribuudi pointer-events väärtuseks “ mitte ühtegi ”:

.nupp2 {
osuti-sündmused : mitte ühtegi ;
}

Atribuudi osuti sündmused kasutamine ja selle väärtuse määramine mitte keelab klikisündmuse, mida on näha järgmises väljundis:

Oleme pakkunud lihtsaima meetodi klikisündmuse keelamiseks CSS-i abil.

Järeldus

Klõpsusündmuse keelamiseks HTML-is tuleb osuti-sündmused ” kasutatakse CSS-i atribuuti. Selleks lisage HTML-element ja määrake atribuudi pointer-events väärtuseks ' mitte ühtegi ', et keelata selle klikisündmus. Selles artiklis selgitati koos selle näitega, kuidas CSS-i abil klikisündmust keelata.