Touch-events

Het is mogelijk om touch-aware apps te schrijven die op veel mobiele apparaten werken. Touch-aware desktopbrowsers zijn bijna een feit; bereid u nu voor.

Voor het eerst verschenen in mobile Safari voor iOS 2.0.

Vier basisevents:

• touchstart
• touchmove
• touchend
• touchcancel

Velden van het event-object:

• touches
• targetTouches
• changedTouches
• modifier-toetsen (shift, alt, ctrl, meta)

Velden van het touch-object:

• identifier
• clientX/Y
• pageX/Y
• screenX/Y

Nu een W3C Working Draft. Er bestaan nog steeds veel verschillen tussen leveranciers:

Gerelateerd: Unity Asset Store — Kant-en-klare kunst, tools en sjablonen die rechtstreeks in uw Unity-project terechtkomen.

• touchenter / touchleave (Firefox, Blackberry)
• gesturestart / gesturechange / gestureend (mobile Safari)
• MSPointer* / MSGesture* (IE10)

Native-achtig gedrag

Apparaten met alternatieve invoermethoden. Multi-touch: FF6+ ondersteunt W3C-stijl touch-events. IE10 heeft MSPointer* / MSGesture*. Nog geen ondersteuning in WebKit.

Schakel standaard gesture-verwerking uit (pannen / zoomen / scrollen):

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

en

Onze keuze: Udemy Game Development Courses — On-demand cursussen over Unity, Unreal, C++, C# en shader-programmering.

document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);

Schakel standaard gesture-verwerking uit (pannen / zoomen / scrollen). Verwerk rendering in een lus:

var touches = [], // hier zou je ook requestAnimationFrame() kunnen gebruiken
    renderLoop = setInterval(function() {
      draw(touches); // onze draw-functie aanroepen
    }, 15);

myElement.addEventListener('touchmove', function(e) {
  touches = e.touches;
}, false);

Schakel standaard gesture-verwerking uit (pannen / zoomen / scrollen). Verwerk rendering in een lus. Ondersteun single-touch-apparaten (bijv. Android-telefoons).

Schakel standaard gesture-verwerking uit (pannen / zoomen / scrollen). Verwerk rendering in een lus. Ondersteun single-touch-apparaten (bijv. Android-telefoons). Verwerk muisevents voor:

• Telefoons met fysieke pointer-hardware (bijv. veel Android-handsets)
• Telefoons zonder touch-events (bijv. Windows Phone 7)
• Desktopbrowsers zonder touch-ondersteuning (bijv. Chrome)

Schakel standaard gesture-verwerking uit (pannen / zoomen / scrollen). Verwerk rendering in een lus. Ondersteun single-touch-apparaten (bijv. Android-telefoons). Verwerk muisevents.

Ondersteun touch-enabled desktopbrowsers:

• Firefox (W3C-stijl touch-events)
• IE10 (MSPointer*)

@ @ggoodale