CSS pointer-events
Vlastnost pointer-events umožňuje zrušit reakci na události vyvolané myší.
V některých situacích, například při rolování po stránce, může být zbytečné, aby se u všech elementů, co mají efekt po najetí myši, na ten zlomek sekundy, kdy kursor bude nad elementem, :hover vyvolával.
CSS vlastnost pointer-events může toto chování zablokovat. Kromě CSS události umí blokovat i události v JavaScriptu (onclick, onmouseover apod.). Bohaté využití má u SVG, kde funguje od IE 9. U HTML obsahu je podpora mimo starou Operu 12 až od IE 11.
Odstavec má barevný :hover a při onclicku zobrazí JS hlášku.
Stejný odstavec, ale nastavení pointer-events: none by tuto parádu mělo zrušit.
Poznámka: správně řečeno nejde o blokování událostí myši, ale obecně ukazatele.
Hodnoty
autonone- Události vyvolané ukazatelem se neprojeví.
- SVG
- Pro SVG existuje dalších 7 hodnot.
Výchozí hodnota. Jako by se nic nenastavilo.
Využití
S pointer-events: none se dá třeba zablokovat odkaz, tlačítko nebo zrychlit rolování stránky (i když u toho je otázka, zda by takové chování neměl zajišťovat přímo prohlížeč).
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.