Proprietà CSS pointer-events
La proprietà pointer-events specifica se un elemento può rispondere agli eventi del puntatore. Valori ed esempi pratici.
La proprietà pointer-events controlla se un elemento può essere il bersaglio di eventi del puntatore — clic del mouse, hover, tocco e input della penna. Quando è impostata su none, l'elemento diventa "trasparente" al puntatore: clic, hover e altre interazioni lo attraversano e raggiungono ciò che si trova sottostante.
Questa pagina illustra i valori della proprietà, dove funziona effettivamente in HTML rispetto a SVG, i casi d'uso più comuni e le insidie più frequenti.
Originariamente definita per SVG, pointer-events è ora una proprietà CSS standard.
Molti valori si applicano solo agli elementi SVG. Per gli elementi HTML ordinari, solo auto e none sono ampiamente supportati — i valori specifici per SVG (fill, stroke, visiblePainted, ecc.) non hanno effetto sull'HTML.
Quando utilizzarla
- Overlay click-through. Un overlay decorativo o di caricamento copre la pagina, ma si vuole che i clic raggiungano il contenuto sottostante. Impostare
pointer-events: nonesull'overlay. - Disabilitare un controllo visivamente. Combinare
pointer-events: nonecon una riduzione dell'opacityper far sembrare un pulsante o un link disabilitato sia visivamente che funzionalmente (i link non hanno un attributodisablednativo, quindi questo è un pattern comune). - Far passare gli eventi attraverso forme SVG specifiche. Una forma disegnata sopra le altre può essere resa non interattiva in modo che le forme sottostanti rimangano cliccabili.
- Riabilitare un figlio all'interno di un genitore disabilitato. Impostare
nonesu un wrapper eautosu un figlio specifico per rendere interattivo solo quel figlio.
Note importanti
Impostare pointer-events: none su un elemento gli impedisce di essere il bersaglio di eventi del puntatore, ma non blocca i listener degli eventi su quell'elemento dall'attivarsi. Se un elemento figlio ha pointer-events riabilitato (auto), il figlio può comunque essere preso di mira. Gli eventi che prendono di mira il figlio si propagano poi verso l'alto attraverso il genitore e attivano qualsiasi listener ad esso collegato.
pointer-events: none blocca solo l'input del puntatore. Non rimuove l'elemento dall'ordine di tabulazione, quindi gli utenti da tastiera possono ancora raggiungere un link o un pulsante "disabilitato" tramite il tasto Tab. Per una vera accessibilità, è necessario anche rimuovere l'elemento dall'ordine di tabulazione (tabindex="-1") o utilizzare il vero attributo disabled sui controlli del form.
| Valore iniziale | auto |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | No. |
| Versione | Scalable Vector Graphics (SVG) 1.1 (Second Edition). |
| Sintassi DOM | object.style.pointerEvents = "auto"; |
Sintassi
Sintassi CSS di pointer-events
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;Esempio della proprietà pointer-events:
Esempio di codice CSS pointer-events
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.example {
pointer-events: none;
}
div.example2 {
pointer-events: auto;
}
div.example:hover,
div.example2:hover {
outline: 2px solid #1c87c9;
}
</style>
</head>
<body>
<h2>The Pointer-events Property</h2>
<h3>Pointer-events: none</h3>
<div class="example">
Click here: <a href="https://www.w3docs.com/learn-javascript.html">JavaScript Tutorial</a>
</div>
<h3>Pointer-events: auto</h3>
<div class="example2">
Click here: <a href="https://www.w3docs.com/learn-css.html">CSS Tutorial</a>
</div>
</body>
</html>Risultato
Nell'esempio sopra, passare il mouse su ciascun box. Il primo <div> (pointer-events: none) non risponde — il suo link non è cliccabile e non appare nessun contorno al hover. Il secondo <div> (pointer-events: auto) si comporta normalmente.
Pattern comune: un link disabilitato
Poiché gli anchor non hanno un attributo disabled, pointer-events: none è il metodo abituale per rendere un link non cliccabile. Abbinarlo a opacity affinché lo stato sia visibile:
.btn-link.is-disabled {
pointer-events: none;
opacity: 0.5;
cursor: default;
}Ricordare la nota sull'accessibilità sopra: il link è comunque raggiungibile tramite tastiera a meno che non si imposti anche tabindex="-1".
Esempio con il tag <svg>
In SVG, pointer-events può instradare i clic attraverso forme sovrapposte. Nell'esempio seguente il path con classe .c usa pointer-events: none, quindi i clic lo attraversano e raggiungono le forme sottostanti, mentre .d usa pointer-events: all per catturare eventi anche dove il suo riempimento è trasparente:
Esempio del valore none di CSS pointer-events
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
fill: #ccc;
}
.b {
fill: #8ebf42;
}
.c {
fill: #1c87c9;
pointer-events: none;
}
.d {
stroke: #666;
fill: none;
pointer-events: all;
}
.box:hover {
stroke: #000;
stroke-width: 5;
}
</style>
</head>
<body>
<h2>Pointer-events property example</h2>
<svg width="300" height="300">
<g transform="translate(20, 20)">
<path class="a box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
<path class="b box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
<path class="c box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
<path class="d box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
</g>
</svg>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| none | L'elemento non reagisce mai agli eventi del puntatore. |
| auto | L'elemento accetta eventi del puntatore come clic, hover, ecc. Questo è il valore predefinito della proprietà. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Valori solo per SVG
| Valore | Descrizione |
|---|---|
| visiblePainted | L'elemento può essere il bersaglio di un evento del puntatore solo quando la proprietà visibility è impostata su visible, il cursore del mouse si trova sull'interno o sul perimetro dell'elemento, e la proprietà fill o stroke è impostata su un valore diverso da none. |
| visibleFill | L'elemento può essere il bersaglio di un evento del puntatore solo quando la proprietà visibility è impostata su visible e il cursore del mouse si trova sull'interno dell'elemento. |
| visibleStroke | L'elemento può essere il bersaglio di un evento del puntatore solo quando la proprietà visibility è impostata su visible e il cursore del mouse si trova sul perimetro dell'elemento. |
| visible | L'elemento può essere il bersaglio di un evento del puntatore solo quando la proprietà visibility è impostata su visible e il cursore del mouse si trova sull'interno o sul perimetro dell'elemento. |
| painted | L'elemento può essere il bersaglio di un evento del puntatore solo quando il cursore del mouse si trova sull'interno o sul perimetro dell'elemento e la proprietà fill o stroke è impostata su un valore diverso da none. |
| fill | L'elemento può essere il bersaglio di un evento del puntatore solo quando il puntatore si trova sull'interno dell'elemento. |
| stroke | L'elemento può essere il bersaglio di un evento del puntatore solo quando il puntatore si trova sul perimetro dell'elemento. |
| all | L'elemento può essere il bersaglio di un evento del puntatore solo quando il puntatore si trova sull'interno o sul perimetro dell'elemento. |
Proprietà correlate
cursor— modifica il cursore del mouse mostrato sopra un elemento (usarecursor: not-allowedper enfatizzare un aspetto disabilitato).visibility—visibility: hiddenrimuove anch'essa un elemento dall'interazione con il puntatore, ma nasconde anche l'elemento.opacity— comunemente abbinata apointer-events: noneper rappresentare uno stato disabilitato.user-select— controlla se il testo all'interno di un elemento può essere selezionato.