Pointer-események - CSS-trükkök

A pointer-eventstulajdonság lehetővé teszi annak ellenőrzését, hogy a HTML elemek miként reagáljanak az egér / érintés eseményeire - ideértve a CSS lebegő / aktív állapotokat, a Javascriptben kattintson / érintse meg az eseményeket, és hogy a kurzor látható-e.

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

Míg a pointer-eventstulajdonság tizenegy lehetséges értéket vesz fel, mindhárom kivételével SVG-vel való használatra van fenntartva. Bármely HTMl elem három érvényes értéke:

none megakadályozza az összes kattintás, állapot és kurzor opciót a megadott HTML elemen
autovisszaállítja az alapértelmezett funkciót (hasznos használatra gyerek elemei egy elem pointer-events: none;meghatározott
inheritpointer-eventsaz elem szülőjének értékét fogja használni

Nézze meg ezt a tollat!

Amint azt a fentiekben bemutattuk, az elsődleges felhasználási lehetőség pointer-eventsaz, hogy a kattintási vagy koppintási viselkedés lehetővé tegye az elem "áthaladását" egy másik elem alatt, a Z tengely alatt. Ez például hasznos lehet grafikus átfedéseknél, vagy elemek elrejtése opacity(pl. Eszköztippek) mellett, és továbbra is lehetővé teszi a szövegválasztást az alatta lévő tartalomra.

Látványosság

„A pointersemények használata a CSS-ben nem SVG elemekhez kísérleti jellegű. A szolgáltatás korábban a CSS3 felhasználói felület tervezetének része volt, de sok nyitott probléma miatt elhalasztották a CSS4-re. " - Mozilla MDN
"Ha kattintásesemény-figyelőt ad hozzá egy elemhez, majd eltávolítja a mutató-esemény stílusát (vagy ha értékét megváltoztatja automatikusra, akkor a kattintási esemény elindítja a kijelölt funkcionalitást. Alapvetően a kattintási esemény tiszteletben tartja a mutató-esemény értékét." - David Walsh

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.