Moderní tvorba webových aplikací

O webu

CSS pointer-events

Vlastnost pointer-events umožňuje zrušit reakci na události vyvolané myší.

2 minuty

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

auto

Výchozí hodnota. Jako by se nic nenastavilo.

none
Události vyvolané ukazatelem se neprojeví.
SVG
Pro SVG existuje dalších 7 hodnot.

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č).

Související články

CSS @starting-style

Jak animovat elementy při jejich prvním zobrazení pomocí at-pravidla @starting-style.

12 minut

CSS pseudo element ::marker

CSS pseudo element ::marker umožňuje stylovat odrážky seznamů

4 minuty

Zobrazení dlouhé URL

Jak zobrazit dlouhé URL v aplikaci, aby nerozbila layout.

6 minut

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

12 minut

Novinky e-mailem

Když budu mít něco opravdu zajímavého, můžu vám to poslat e-mailem

Přidej se k 500+ čtenářům
Jen kvalitní obsah
Žádný spam

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2026