You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/6-pointer-events/article.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
-
# Pointer events
1
+
# Eventi del puntatore
2
2
3
3
I Pointer events (da adesso in poi, eventi del puntatore) sono una maniera moderna di gestire gli input di una varietà di dispositivi di puntamento, come mouse, penne/stilo, touchscreen e così via.
4
4
5
-
## The brief history
5
+
## Una breve storia
6
6
7
-
Facciamo una breve panoramica, in modo da averne una visione generale del posto che occupano gli questi eventi, rispetto agli altri.
7
+
Facciamo una breve panoramica, in modo da avere una visione generale del posto che occupano questi eventi rispetto agli altri.
8
8
9
9
- Tanto tempo fa, lontano nel passato, c'erano solo gli eventi del mouse.
10
10
11
-
Ad un certo punto, iniziarono a diffondersi i dispositivi touch, in particolar modo telefoni e tablet. Per fare in modo che gli script esistenti potessero continuare a funzionare, questi generavano (e lo fanno ancora oggi) eventi del mouse. Ad esempio, un touchscreen al tocco, genera un `mousedown`. In questa maniera i nuovi dispositivi poterono funzionare correttamente con le pagine web.
11
+
Ad un certo punto, iniziarono a diffondersi i dispositivi touch, in particolar modo telefoni e tablet. Per fare in modo che gli script esistenti potessero continuare a funzionare, questi generavano (e lo fanno ancora oggi) eventi del mouse. Ad esempio, un touchscreen, al tocco, genera un `mousedown`. In questa maniera i nuovi dispositivi poterono funzionare correttamente con le pagine web.
12
12
13
13
Tuttavia i dispositivi touch hanno molte più potenzialità rispetto a quelle di un mouse. Ad esempio, con questi dispositivi, è possibile toccare contemporaneamente più punti dello schermo ("multi-touch"). A dispetto di ciò, gli eventi del mouse non hanno le proprietà necessarie per poterlo gestire.
14
14
@@ -48,7 +48,7 @@ Come possiamo osservare, per ogni `mouse<event>`, c'è un `pointer<event>` che g
48
48
```smart header="Rimpiazzare `mouse<event>` con `pointer<event>` nel codice"
49
49
Possiamo rimpiazzare gli eventi `mouse<event>` con quelli `pointer<event>` nel codice, ed aspettarci che il tutto continui a funzionare perfettamente con il mouse.
50
50
51
-
Il supporto ai dispositivi touch inoltre migliorerà "magicamente". Sebbene, saremo costretti ad aggiungere `touch-action: none` in alcune sezioni del CSS. Affronteremo questa cosa più avanti nella sezione del `pointercancel`.
51
+
Il supporto ai dispositivi touch inoltre migliorerà "magicamente". Sebbene saremo costretti ad aggiungere `touch-action: none` in alcune sezioni del CSS. Affronteremo questa cosa più avanti nella sezione del `pointercancel`.
52
52
```
53
53
54
54
## Proprietà degli eventi del puntatore
@@ -79,7 +79,7 @@ Una delle cose assolutamente non supportate dagli eventi del mouse è il multi-t
79
79
80
80
I Pointer Events permettono di gestire il multi-touch con l'aiuto delle proprietà `pointerId` e `isPrimary`.
81
81
82
-
Ecco ciò che succede quando un utente tocca il touchscreen in punto, e successivamente poggia un altro dito su qualche altro punto dello schermo:
82
+
Ecco ciò che succede quando un utente tocca il touchscreen in un punto, e successivamente poggia un altro dito su qualche altro punto dello schermo:
83
83
84
84
1. Al primo tocco:
85
85
- `pointerdown` con `isPrimary=true` con un determinato `pointerId`.
@@ -102,7 +102,7 @@ Nota bene: Per vedere la differenza dei valori di `pointerId/isPrimary` è neces
102
102
103
103
## Evento: pointercancel
104
104
105
-
L'evento `pointercancel` si genera se nel bel mezzo di una interazione, avviene qualcosa che ne causa la cancellazione, tale che non venga generato nessun evento del puntatore.
105
+
L'evento `pointercancel` si genera se, nel bel mezzo di una interazione, avviene qualcosa che ne causa la cancellazione, tale che non venga generato nessun evento del puntatore.
106
106
107
107
Le cause possono essere:
108
108
- Il dispositivo di puntamento è stato fisicamente disabilitato.
@@ -186,7 +186,7 @@ Funziona in questa maniera:
186
186
187
187
Quindi, per tenere traccia di tutti i movimenti del puntatore, incluso quando va sopra o sotto il `thumb`, abbiamo dovuto assegnare il gestore evento `pointermove` all'intero `document`.
188
188
189
-
Questa soluzione sembra un po' "sporca". Uno dei problemi è che i movimenti del puntatore sul documento possono causare effetti collaterali, innescare altri gestori evento, per nulla correlate allo slider.
189
+
Questa soluzione sembra un po' "sporca". Uno dei problemi è che i movimenti del puntatore sul documento possono causare effetti collaterali, innescare altri gestori evento, per nulla correlati allo slider.
190
190
191
191
La cattura del puntatore fornisce il mezzo per effettuare il binding di `pointermove` a `thumb` ed evitare questo tipo di problemi:
// nota: non necessita la chiamata a thumb.releasePointerCapture,
214
-
// avviene autamaticamente al pointerup
214
+
// avviene automaticamente al pointerup
215
215
```
216
216
217
217
```online
@@ -237,7 +237,7 @@ Gli eventi del puntatore permettono di gestire gli eventi del mouse, del touch e
237
237
238
238
Gli eventi del puntatore estendono gli eventi del mouse. Possiamo sostituire `mouse` con `pointer` nei nomi degli eventi ed aspettarci che il codice continui a funzionare per il mouse, con un supporto migliore per altri tipi di dispositivi.
239
239
240
-
Per i drag'n'drop ed interazioni touch complesse che il browser potrebbe decidere di dirottare sulla propria gestione, dobbiamo ricordarci di disabilitarne l'azione predifinita sugli eventi ed impostare sul CSS `touch-events: none`, per gli elementi che vogliamo coinvolgere.
240
+
Per i drag'n'drop ed interazioni touch complesse che il browser potrebbe decidere di dirottare sulla propria gestione, dobbiamo ricordarci di disabilitarne l'azione predefinita sugli eventi ed impostare sul CSS `touch-events: none`, per gli elementi che vogliamo coinvolgere.
241
241
242
242
Le abilità aggiuntive degli eventi del puntatore sono:
0 commit comments