Šiame straipsnyje sužinosime, kaip išjungti paspaudimo įvykį naudojant CSS.

Taigi, pradėkime!

Kaip išjungti paspaudimo įvykį naudojant CSS?

Galite išjungti paspaudimų įvykius naudodami CSS ' rodyklės įvykiai ' nuosavybė. Bet, pereidami prie jo, trumpai jums tai paaiškinsime.

Kas yra „pointer-events“ CSS nuosavybė?

„ rodyklės įvykiai “ valdykite, kaip HTML elementai reaguoja arba elgiasi su palietimo įvykiu, pvz., paspaudimo ar bakstelėjimo įvykius, aktyvias ar užvedimo būsenas ir ar žymeklis matomas, ar ne.

Sintaksė
Rodyklės įvykių sintaksė yra tokia:

Pirmiau minėta savybė turi dvi reikšmes, pvz., „ automatinis “ ir „ nė vienas “:

• automatinis: Jis naudojamas numatytiesiems įvykiams atlikti.
• nė vienas: Jis naudojamas įvykiams išjungti.

Pastaba: toliau pateiktame pavyzdyje pirmiausia bus parodyta, kaip pridėti du aktyvius mygtukus, o tada išjungsime antrojo mygtuko paspaudimo įvykį.

1 pavyzdys: Mygtukų paspaudimo įvykio išjungimas naudojant CSS
Šiame pavyzdyje sukursime antraštę

ir du mygtukus. Tada nurodykite „ mygtuką “ kaip pirmojo mygtuko klasės pavadinimą ir priskirkite „ mygtuką “ ir „ mygtukas 2 “ kaip antrojo mygtuko klases.

HTML

< div >
< h1 > Išjungti paspaudimo įvykį naudojant CSS < / h1 >
< mygtuką klasė = 'mygtukas' > Įgalinimo mygtukas < / mygtuką >
< mygtuką klasė = 'mygtukas mygtukas2' > Išjungti mygtukas < / mygtuką >
< / div >

CSS sistemoje „ .mygtukas “ naudojamas norint pasiekti abu HTML faile sukurtus mygtukus. Tada nustatykite kraštinės stilių kaip „ nė vienas “ ir užpildykite kaip „ 25 piks “. Po to nustatykite mygtuko teksto spalvą kaip „ rgb(29, 6, 31) “ ir mygtuko fonas kaip „ rgb(19, 192, 163) “. Taip pat nustatysime mygtuko spindulį kaip „ 5 piks “.

CSS

.mygtukas {
siena : nė vienas ;
kamšalas : 25 piks ;
spalva : rgb ( 29 , 6 , 31 ) ;
fono spalva : rgb ( 19 , 192 , 163 ) ;
pasienio spindulys : 5 piks ;
}

Po to abiejuose mygtukuose pritaikysime aktyvią pseudoklasę kaip „ .button:aktyvus “ ir nustatykite mygtuko spalvą kaip „ rgb(200, 255, 0) “:

.mygtukas : aktyvus {
fono spalva : rgb ( 209 , 65 , 65 ) ;
}

Dėl to pamatysite tokį rezultatą:

Dabar pereisime prie kitos dalies, kurioje išjungsime antrojo mygtuko paspaudimo įvykį.

Norėdami tai padaryti, naudokite ' .mygtukas2 “, kad pasiektumėte antrąjį mygtuką, sukurtą HTML faile, ir po to nustatykite žymiklio įvykių ypatybės reikšmę kaip „ nė vienas “:

.mygtukas2 {
rodyklės įvykiai : nė vienas ;
}

Naudojant žymeklio įvykių ypatybę ir nustačius jos vertę į non, paspaudimo įvykis bus išjungtas, o tai galima pamatyti toliau pateiktoje išvestyje:

Pateikėme lengviausią paspaudimo įvykio išjungimo būdą naudojant CSS.

Išvada

Norėdami išjungti paspaudimo įvykį HTML, „ rodyklės įvykiai “ naudojama CSS savybė. Šiuo tikslu pridėkite HTML elementą ir nustatykite rodyklės įvykių ypatybės reikšmę kaip „ nė vienas “, kad išjungtumėte paspaudimo įvykį. Šiame straipsnyje kartu su pavyzdžiu paaiškinta, kaip išjungti paspaudimo įvykį naudojant CSS.