Järgmises postituses selgitatakse, kuidas osuti sündmuse atribuuti kasutatakse koodis HTML-dokumendi lingi keelamiseks.
Lingi keelamine CSS-i abil
CSS-i teeki kasutatakse koos teiste keeltega, näiteks HTML-iga. Seega, kui HTML-dokumendil on link mis tahes muu veebilehe otse külastamiseks, kasutatakse lingi keelamiseks atribuuti CSS-i osuti sündmused:
osuti-sündmused : mitte ühtegi ;
kursor : vaikimisi ;
Kuidas kasutada koodis osutisündmuste atribuuti?
CSS-i stiililause, milles lisame lingi keelamiseks atribuudi pointer-events, peaks viitama linki sisaldavale klassile. Näiteks kui meil on klass nimega 'mitteaktiivne', mis sisaldab linki:
< h1 > Keela link CSS-i abil < / h1 >< br >
< b > Link: < / b >
< a href = 'https://www.google.com/' klass = 'mitteaktiivne' > Kliki siia < / a >
Ülaltoodud koodis on klõpsaval lingil klass 'mitteaktiivne', mida kasutatakse sellele HTML-elemendile juurdepääsuks.
Ülaltoodud kood genereerib järgmise väljundi:
Lingil klõpsamine suunab kasutaja Google'i otsingumootorisse:
Osuti-sündmuse atribuut
- Kirjutage CSS-stiili elemendi sisse osuti sündmuse atribuut ( pointer-sündmus: puudub ), viidates klassile (mitteaktiivne), mis sisaldab linki, mis tuleks keelata.
- Määrake kursor mis tahes suvandiks, nagu vaikeseade, puudub, kursor jne.
.mitte-aktiivne {
osuti-sündmused : mitte ühtegi ;
kursor : vaikimisi ;
}
>
Pärast koodi käivitamist ei muutu lingi graafiline kuva väljastpoolt, kuid kui kasutaja sellel klõpsab, ei tee see midagi:
See oli lihtsaim viis koodis oleva lingi keelamiseks CSS-lausete abil.
Järeldus
Lingi, mis suunab kasutaja teistele veebilehtedele, saab hõlpsasti keelata lihtsa CSS-i atribuudi „pointer-events: none” kaudu. See ei nõua muudatusi koodi loogikas ega klassis, milles link on loodud. Lingi sisaldavale klassile viitava stiilielemendi stiilielemendis on vaja lihtsat osuti sündmuse atribuuti.