V tomto zápise vysvetlíme, ako používať vlastnosť CSS pointer-events.
Čo je vlastnosť ukazovateľa udalostí?
CSS “ ukazovateľ-udalosti ” špecifikuje správanie kurzora/klepnutia smerom k HTML elementu a to, či bude vybraný element reagovať vykonaním akcií, ako je umiestenie alebo kliknutie.
Ako používať vlastnosť udalostí ukazovateľa?
V CSS možno vlastnosť pointer-events využiť na povolenie alebo zakázanie akcií ukazovateľa na niektorých špecifických prvkoch HTML. Syntax vlastnosti pointer-events je uvedená nižšie.
Syntax
ukazovateľ-udalosti : žiadny | auto ;
V uvedenej syntaxi „ auto ” je predvolená hodnota vlastnosti pointer-events a umožňuje akciu ukazovateľa smerom k prvku a “ žiadny “ je úplne v protiklade s autom; zakáže akciu ukazovateľa na prvkoch HTML.
Poďme ďalej a zoberme si príklad na pochopenie vlastnosti ukazovateľa-udalosti.
Príklad 1
V našom súbore HTML zadajte značku ukotvenia s textom „ LinuxHint.io “ a umiestnite ho do časti tela.
HTML
< a href = “https://www.linuxhint.io/” > LinuxHint.io < / a >Teraz použijeme „ ukazovateľ-udalosti 'vlastnosť a priraďte jej hodnotu' žiadny “. Toto zakáže akciu ukazovateľa na prvku.
CSS
a {ukazovateľ-udalosti : žiadny ;
}
Uložte súbor HTML s uvedeným kódom a spustite ho pomocou prehliadača:
Zoberme si ďalší príklad, aby sme podrobne pokryli vlastnosť udalosti ukazovateľa.
Príklad 2
Nastavte hodnotu vlastnosti pointer-events na ' auto ' tentokrát. Prinúti prvok reagovať po umiestnení kurzora alebo kliknutí. Auto je však predvolená hodnota vlastnosti pointer-events.
CSS
a {ukazovateľ-udalosti : auto ;
}
Výkon
Zaoberali sme sa rôznymi spôsobmi použitia vlastnosti CSS pointer-events.
Záver
Na ovládanie akcií ukazovateľa môžeme použiť CSS “ ukazovateľ-udalosti ' nehnuteľnosť. ' auto ” hodnota je preddefinovaná hodnota tejto vlastnosti; umožňuje akcie nad prvkami HTML. Keď sa vlastnosť pointer-events používa s hodnotou „ žiadny “, zakáže akcie voči konkrétnemu prvku. Tento zápis ukázal, ako používať vlastnosť CSS pointer-events.