Informazioni
L'argomento richiesto è visualizzato di seguito, ma non è incluso in questa libreria.

Eventi puntatore

A partire da Windows 8, Internet Explorer supporta la specifica W3C Pointer Events per la gestione dell'input utente. Gli eventi del puntatore sono modellati a partire dai tradizionali eventi del mouse, ma astraggono il concetto di puntatore a tutte le modalità di input utente, che includono mouse, tocco e penna. Puoi usare gli eventi puntatore per creare un'esperienza utente trasparente tra tutti i metodi di input, scrivendo un singolo set di eventi applicabile a tutte le funzionalità hardware.

Eventi puntatore e oggetto PointerEvent

L'oggetto PointerEvent eredita da MouseEvent e viene inviato per interazioni utente dello stesso tipo.

Evento mouseEvento puntatore corrispondente
mousedown pointerdown
mouseenter pointerenter
mouseleave pointerleave
mousemove pointermove
mouseout pointerout
mouseover pointerover
mouseup pointerup

 

L'oggetto PointerEvent fornisce tutte le consuete proprietà previste per gli eventi del mouse (quali coordinate clientX /clientY, l'elemento target e le proprietà button / buttons), oltre a queste proprietà aggiuntive che consentono di distinguere tra caratteristiche e tipi di input.

Proprietà PointerEventDescrizione

height

Altezza (dimensione dell'asse Y) in pixel CSS dell'area geometrica di contatto del puntatore.

isPrimary

Restituisce un valore che specifica se il puntatore associato all'evento è il puntatore principale per l'interazione corrente tramite mouse, tocco o penna.

pointerId

Identificatore univoco del punto di contatto per un'interazione tramite mouse, tocco o penna.

pointerType

Restituisce un valore che specifica se l'evento è dovuto a un'interazione tramite mouse, tocco o penna.

pressure

Restituisce il valore normalizzato della pressione di input del puntatore nell'intervallo [0,1], dove 0 e 1 rappresentano rispettivamente i livelli di pressione minimo e massimo rilevabili dall'hardware.

tiltX

Restituisce l'angolo tra il piano Y-Z e quello che contiene l'asse della penna e l'asse Y, in un intervallo da -90 a +90 gradi. A un valore positivo di X corrisponde un'inclinazione verso destra.

tiltY

Restituisce l'angolo fra il piano X-Z e il piano trasduttore-X. A un valore positivo di Y corrisponde un'inclinazione verso l'utente.

width

Restituisce la larghezza (dimensione dell'asse X) in pixel CSS dell'area geometrica di contatto del puntatore.

 

Compatibilità del mouse

Dopo aver generato gli eventi puntatore, Internet Explorer genera gli eventi mouse per il punto di contatto principale, ad esempio il primo dito sullo schermo. Ciò permette di continuare a utilizzare gli attuali siti Web basati sugli eventi mouse.

Diversamente da quanto avviene con il mouse, sullo schermo possono essere presenti contemporaneamente più puntatori, ad esempio quando si utilizza un dispositivo multitocco. In questi scenari si attiva un evento puntatore distinto per ogni punto di contatto, per semplificare la creazione di siti e app multitocco.

Rilevamento di funzionalità e test di supporto del tocco

Per testare il supporto degli eventi puntatore puoi usare l'interfaccia PointerEvent.


if (window.PointerEvent) {
  // Pointer events are supported.
}

Ricorda che il rilevamento della funzionalità per gli eventi puntatore non indica se il dispositivo supporta l'input tramite tocco o penna. La proprietà PointerEvent verifica solo se la piattaforma è in grado di generare eventi puntatore indipendentemente dall'hardware del sistema.

Per testare le funzionalità di tocco e il supporto del multitocco, puoi usare la proprietà maxTouchPoints.


// Test for touch capable hardware 
if(navigator.maxTouchPoints) { ... }

// Test for multi-touch capable hardware
if(navigator.maxTouchPoints && navigator.maxTouchPoints > 1) { ... }

// Check the maximum number of touch points the hardware supports
var touchPoints = navigator.maxTouchPoints;

Controllo della funzione predefinita di gestione del tocco

A partire da Windows 8, Explorer include funzioni predefinite per la gestione delle interazioni tocco più comuni, che includono la panoramica delle aree scorrevoli, lo zoom tramite avvicinamento delle dita e il supporto delle operazioni di trascinamento in HTML5, per le interazioni tocco attivate dall'utente tramite una sequenza di pressione prolungata e trascinamento. Per specificare se e come una determinata area della pagina può essere manipolata tramite l'input tocco, oltre ai comportamenti predefiniti di gestione del tocco, puoi usare la proprietà CSS touch-action.

La seguente regola di stile disabilita tutte le funzioni predefinite di gestione del tocco e indirizza tutti gli eventi puntatore al codice JavaScript:


touch-action: none;

Per ulteriori informazioni, vedi Controllo dell'esperienza di tocco predefinita.

Cattura degli eventi puntatore su un elemento

In alcuni casi può essere utile assegnare un puntatore specifico a un elemento, per essere certi che l'elemento continuerà a ricevere gli eventi di puntatore anche se il punto di contatto si sposta fuori dall'elemento.

Se ad esempio l'utente effettua una pressione prolungata su un pulsante dell'interfaccia utente della tua app Web e il dito scivola fuori dal pulsante prima che l'utente lo sollevi (interrompendo il contatto), il pulsante potrebbe non ricevere l'evento pointerup. In questo caso il pulsante viene definitivamente considerato come non premuto. Se assegni il puntatore all'elemento button quest'ultimo riceve gli eventi puntatore, incluso l'evento pointerup che segnala il ritorno del pulsante allo stato iniziale.

Puoi richiedere al metodo setPointerCapture di un elemento di assegnare uno specifico pointerId a tale elemento.


window.addEventListener('pointerdown', pointerdownHandler, false);

function pointerdownHandler (evt) {
      evt.target.setPointerCapture(evt.pointerId);
}

Quando un elemento cattura un puntatore, gli elementi padre e predecessore ricevono l'evento gotpointercapture durante le fasi di cattura e bubbling.

L'oggetto catturato viene rilasciato quando il puntatore viene rimosso (pointerup) o esplicitamente rilasciato chiamando il metodo releasePointerCapture. In alcuni casi l'elemento può perdere l'oggetto catturato. Se ad esempio il punto di contatto si sposta fuori dalla finestra o il tocco viene catturato da un altro elemento, l'elemento che lo aveva catturato in precedenza può perdere l'oggetto catturato. L'elemento che perde l'oggetto catturato riceve un evento lostpointercapture.

Annullamento di un puntatore

Quando si usa l'input penna o tocco, è talvolta possibile annullare i puntatori sullo schermo. Se, ad esempio, lo schermo non supporta più di due punti tocco simultanei e si aggiunge un terzo dito sullo schermo, uno degli altri punti verrà annullato poiché l'hardware non è in grado di rilevare tre punti. L'annullamento del puntatore è indicato dall'evento pointercancel. Questo offre la possibilità di gestire le operazioni di pulizia eventualmente necessarie. Se ad esempio l'app gestisce un elenco di puntatori, puoi rimanere in ascolto dell'evento pointercancel per sapere quando rimuovere un determinato puntatore dall'elenco.

Note sulla compatibilità

Per conformità con la versione Candidate Recommendation della specifica W3C Pointer Events, l'implementazione degli eventi puntatore in Internet Explorer 11 è stata lievemente modificata rispetto a quella di Internet Explorer 10. Per informazioni complete, vedi la sezione dedicata agli aggiornamenti degli eventi puntatore nella guida di riferimento dettagliata sulla compatibilità di IE.

Il polyfill JavaScript HandJS fornisce una libreria che puoi usare per scrivere codice basato sul modello di eventi puntatore destinato a browser che non supportano ancora la specifica W3C Pointer Events. Per una demo, vedi Creating an universal virtual touch joystick with Hand.JS.

Informazioni di riferimento sulle API

PointerEvent

Esempi ed esercitazioni

Preparare il sito per l'input tocco
Esempio di puntatori e gesti

Dimostrazioni di Internet Explorer Test Drive

Mandelbrot Explorer
Browser Surface
Touch Effects
Brick Breaker

Post di IEBlog

Transizione degli eventi puntatore a Candidate Recommendation di W3C
Ulteriori informazioni sugli eventi puntatore in base a Last Call e Working Draft pubblicate da W3C
W3C avvia il Pointer Events Working Group
Eventi puntatore interoperabili: evoluzione degli eventi di input per più dispositivi
Linee guida per la creazione di siti sensibili al tocco
Gestione dell'input multitocco e mouse in tutti i browser
Input tocco per IE10 e app di Windows Store

Specifica

Specifica degli eventi puntatore

Argomenti correlati

Creazione di un joystick touch virtuale universale per tutti i modelli touch grazie a Hand.JS
Eventi gesti
Hand.js: polyfill per il supporto di eventi puntatore su tutti i browser
Scorrimento e zoom con il tocco
Unificazione di tocco e mouse: come gli eventi puntatore semplificheranno il supporto per il tocco in diversi browser

 

 

Mostra:
© 2014 Microsoft