Pointer-events - CSS-Tricks | Almanah CSS 2025

pointer-eventsProprietatea permite controlul asupra modului în care elementele HTML răspunde la mouse - ul / evenimente tactile - inclusiv CSS Hover / statele active faceți clic pe / evenimente apăsați în Javascript, și dacă este sau nu cursorul este vizibil.

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

În timp ce pointer-eventsproprietatea ia unsprezece valori posibile, toate cu excepția a trei dintre ele sunt rezervate pentru utilizare cu SVG. Cele trei valori valide pentru orice element HTMl sunt:

none previne toate opțiunile de clic, stare și cursor de pe elementul HTML specificat
autorestabilește funcționalitatea implicită (utilă pentru utilizare pe elementele copil ale unui element cu pointer-events: none;specificat
inheritva folosi pointer-eventsvaloarea părintelui elementului

Verificați acest stilou!

Așa cum s-a demonstrat mai sus, cazul principal de utilizare pentru pointer-eventseste de a permite comportamentului prin clic sau atingere să „treacă” un element către un alt element de sub acesta pe axa Z. De exemplu, acest lucru ar fi util pentru suprapuneri grafice sau pentru a ascunde elemente cu opacity(de exemplu, sfaturi de instrumente) și totuși permite selectarea textului pe conținutul de sub acesta.

Puncte de interes

„Utilizarea evenimentelor pointer în CSS pentru elemente non-SVG este experimentală. Funcția făcea parte din specificația de schiță a UI CSS3, dar, din cauza numeroaselor probleme deschise, a fost amânată la CSS4. ” - Mozilla MDN
"Dacă adăugați un ascultător de evenimente de clic într-un element, apoi eliminați stilul pointer-events (sau schimbați valoarea acestuia în auto, evenimentul de clic va declanșa funcționalitatea desemnată. Practic, evenimentul de clic respectă valoarea pointer-events." - David Walsh

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.