Pointer Events su IE10: alcuni esempi pratici

Abbiamo già avuto modo di parlare degli eventi MSPointer* in un precedente articolo, che invitiamo a leggere nel caso ci si voglia rinfrescare la memoria. Trattandosi di API molto flessibili e relativamente di basso livello, si prestano alla realizzazione di applicazioni interattive e giochi con supporto multitouch. Per esplorare le potenzialità di queste API, analizzeremo un paio di esempi sviluppati da Microsoft nel suo programma IE10 Test Drive.

Nella demo Touch Effects ( disponibile a questo indirizzo: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/ ) viene testata la presenza delle API MSPointer per gestire il multitouch.

Fig. 1 La demo Touch Effects

In assenza di queste API si ricade nella casistica standard di utilizzo con mouse (un solo punto di contatto):

// Determine correct events to register for
      if(navigator.msPointerEnabled) {
      console.log("Pointers supported");
      downevent = "MSPointerDown";
      upevent = "MSPointerUp";
     moveevent = "MSPointerMove";
      document.addEventListener("MSPointerCancel", function(e){
removeTouchPoint(e); }, false);
      document.addEventListener("MSGestureInit", function(e){
if (e.preventManipulation) e.preventManipulation(); }, false);
document.addEventListener("MSHoldVisual", function(e){ e.preventDefault(); }, false);
}
else {
      console.log("Pointers not supported. Defaulting to mouse events.");
      downevent = "mousedown";
     upevent = "mouseup";
      moveevent = "mousemove";
}

Le variabili downevent, upevent e moveevent contengono il nome dell'evento (una semplice stringa) da utilizzare, in base al valore della variabile booleana msPointerEnabled. Se tale flag booleano è presente e vale true, allora vengono impostate le API MSPointerDown, MSPointerUp e MSPointerMove, altrimenti vengono usate le vecchie mousedown, mouseup e mousemove. Subito dopo, vengono registrati i relativi eventi per l'interazione con la demo:

// Register invariant events
canvasElm.addEventListener(downevent, addTouchPoint, false);
document.addEventListener(upevent, removeTouchPoint, false);

e più in là nel codice vengono tracciati gli eventi di "move" registrando e de-registrando opportunamente le relative funzioni di gestione, in questo modo:

document.addEventListener(moveevent, moveTouchPoint, false);
[…]
document.removeEventListener(moveevent, moveTouchPoint, false);

Anda sedang membaca artikel tentang

Pointer Events su IE10: alcuni esempi pratici

Dengan url

https://gadgetekno.blogspot.com/2013/08/pointer-events-su-ie10-alcuni-esempi.html

Anda boleh menyebar luaskannya atau mengcopy paste-nya

Pointer Events su IE10: alcuni esempi pratici

namun jangan lupa untuk meletakkan link

Pointer Events su IE10: alcuni esempi pratici

sebagai sumbernya

Gadget Info