Pointer-events - Triky CSS | Almanach CSS 2025

Tato pointer-eventsvlastnost umožňuje kontrolu nad tím, jak prvky HTML reagují na události myši / dotyku - včetně stavů přechodu CSS / aktivních stavů, událostí kliknutí / klepnutí v Javascriptu a toho, zda je kurzor viditelný.

.avoid-clicks ( pointer-events: none; )

Zatímco pointer-eventsvlastnost má jedenáct možných hodnot, všechny kromě tří jsou vyhrazeny pro použití s SVG. Tři platné hodnoty pro libovolný prvek HTMl jsou:

none zabrání všem možnostem kliknutí, stavu a kurzoru na zadaném prvku HTML
autoobnoví výchozí funkce (užitečné pro použití na podřízených prvcích prvku se pointer-events: none;zadaným
inheritpoužije pointer-eventshodnotu nadřazeného prvku

Podívejte se na toto pero!

Jak je ukázáno výše, hlavním případem použití pointer-eventsje umožnit chování klepnutím nebo klepnutím „projít“ prvkem k jinému prvku pod ním na ose Z. To by bylo užitečné například pro grafické překryvy nebo pro skrytí prvků s opacity(např. Popisky nástrojů) a stále umožňující výběr textu na obsahu pod ním.

Body zájmu

„Použití pointer-events v CSS pro prvky, které nejsou SVG, je experimentální. Tato funkce bývala součástí specifikace konceptu uživatelského rozhraní CSS3, ale kvůli mnoha otevřeným problémům byla odložena na CSS4. “ - Mozilla MDN
"Pokud přidáte posluchače události kliknutí k prvku, pak odeberete styl událostí ukazatelů (nebo změníte jeho hodnotu na automatickou, událost kliknutí spustí určenou funkčnost. Událost kliknutí v zásadě respektuje hodnotu událostí ukazatelů." - David Walsh

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.