A következő bejegyzés elmagyarázza, hogyan használják a mutató esemény tulajdonságát a kódban a hivatkozás letiltására egy HTML-dokumentumban.
Link letiltása CSS használatával
A CSS-könyvtárat más nyelvekkel, például a HTML-lel együtt használják. Tehát, ha egy HTML-dokumentumban van egy hivatkozás, amely közvetlenül meglátogat egy másik weboldalt, a CSS pointer-events tulajdonsága a hivatkozás letiltására szolgál:
pointer-események : egyik sem ;
kurzor : alapértelmezett ;
Hogyan kell használni a mutató-események tulajdonságot a kódban?
A CSS stílusutasításnak, amelyben a hivatkozás letiltásához hozzáadjuk a pointer-events tulajdonságot, a hivatkozást tartalmazó osztályra kell hivatkoznia. Például, ha van egy „not-active” nevű osztályunk, amely tartalmazza a hivatkozást:
< h1 > Tiltsa le a hivatkozást CSS használatával < / h1 >< br >
< b > Link: < / b >
< a href = 'https://www.google.com/' osztály = 'nem aktív' > Kattints ide < / a >
A fenti kódban a kattintható linknek van egy „not-active” osztálya, amely a HTML-elem eléréséhez lesz használva.
A fenti kód a következő kimenetet generálja:
A linkre kattintva a felhasználó a Google keresőjébe kerül:
A mutató-esemény tulajdonsága
- Egy CSS stíluselemen belül írja be a mutató esemény tulajdonságát ( pointer-esemény: nincs ), miközben a (nem aktív) osztályra hivatkozik, amely azt a hivatkozást tartalmazza, amelyet le kell tiltani.
- Állítsa be a kurzort bármelyik beállításra, például alapértelmezett, nincs, mutató stb.
.nem aktív {
pointer-események : egyik sem ;
kurzor : alapértelmezett ;
}
>
A kód végrehajtása után a hivatkozás grafikus megjelenítése kívülről nem változik, de ha a felhasználó rákattint, nem csinál semmit:
Ez volt a legegyszerűbb módja a hivatkozás letiltásának egy kódban CSS-utasítások segítségével.
Következtetés
A felhasználót más weboldalakra irányító hivatkozás egyszerűen letiltható egy egyszerű CSS „pointer-events: none” tulajdonságon keresztül. Ez nem igényel semmilyen változtatást a kód logikájában vagy az osztályban, amelyben a hivatkozás létrejött. A hivatkozást tartalmazó osztályra hivatkozó stíluselemben egy egyszerű pointer event tulajdonságra van szükség.