Puntatore-eventi - Trucchi CSS

La pointer-eventsproprietà consente il controllo su come gli elementi HTML rispondono agli eventi del mouse / tocco, inclusi gli stati di passaggio del mouse / attivi CSS, gli eventi di clic / tocco in Javascript e se il cursore è visibile o meno.

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

Mentre la pointer-eventsproprietà accetta undici possibili valori, tutti tranne tre sono riservati per l'uso con SVG. I tre valori validi per qualsiasi elemento HTMl sono:

none impedisce tutte le opzioni di clic, stato e cursore sull'elemento HTML specificato
autoripristina la funzionalità predefinita (utile per l'uso su elementi figlio di un elemento con pointer-events: none;specificato
inheritutilizzerà il pointer-eventsvalore del genitore dell'elemento

Dai un'occhiata a questa penna!

Come dimostrato sopra, il caso d'uso principale pointer-eventsè quello di consentire al comportamento di clic o tocco di "passare attraverso" un elemento a un altro elemento sotto di esso sull'asse Z. Ad esempio, ciò sarebbe utile per le sovrapposizioni grafiche o per nascondere gli elementi con opacity(es. Suggerimenti) e consentire comunque la selezione del testo sul contenuto sottostante.

Punti di interesse

“L'uso di eventi puntatore nei CSS per elementi non SVG è sperimentale. La funzione faceva parte della bozza delle specifiche dell'interfaccia utente CSS3 ma, a causa di molti problemi aperti, è stata rimandata a CSS4 ". - Mozilla MDN
"Se aggiungi un listener di eventi clic a un elemento, quindi rimuovi lo stile degli eventi del puntatore (o ne modifichi il valore in auto, l'evento del clic attiverà la funzionalità designata. Fondamentalmente, l'evento del clic rispetta il valore degli eventi del puntatore." - David Walsh

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.