Beröringshändelser

Det är möjligt att skriva beröringskänsliga appar som fungerar på många mobila enheter. Beröringskänsliga webbläsare för datorer är snart här; förbered dig nu.

Förekom först i Mobile Safari för iOS 2.0.

Fyra grundläggande händelser:

• touchstart
• touchmove
• touchend
• touchcancel

Fält i händelseobjektet:

• touches
• targetTouches
• changedTouches
• modifierartangenter (shift, alt, ctrl, meta)

Fält i beröringsobjektet:

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

Nu ett W3C Working Draft. Många skillnader mellan leverantörer finns fortfarande:

Relaterat: Unity Asset Store — Färdiggjord konst, verktyg och mallar som faller direkt in i ditt Unity-projekt.

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

Native-liknande beteende

• Enheter med alternativa inmatningsmetoder
• Multitouch
• FF6+ stöder W3C-stilade beröringshändelser
• IE10 har MSPointer* / MSGesture*
• Inget stöd i WebKit ännu

Inaktivera standardhantering av gester (panorering / zoomning / rullning)

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

och

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

Inaktivera standardhantering av gester (panorering / zoomning / rullning)

Hantera rendering i en loop:

var touches = [], // kan också använda requestAnimationFrame() här
renderLoop = setInterval(function() {
  draw(touches); // anropa vår ritfunktion
}, 15);

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

Inaktivera standardhantering av gester (panorering / zoomning / rullning)

• Hantera rendering i en loop
• Stödja enheter med enkeltryck (t.ex. Android-telefoner)

Inaktivera standardhantering av gester (panorering / zoomning / rullning)

• Hantera rendering i en loop
• Stödja enheter med enkeltryck (t.ex. Android-telefoner)
• Hantera mushändelser för:
  • Telefoner med fysisk pekarenhet (t.ex. många Android-mobiler)
  • Telefoner utan stöd för beröringshändelser (t.ex. Windows Phone 7)
  • Datorwebbläsare utan beröringsstöd (t.ex. Chrome)

Inaktivera standardhantering av gester (panorering / zoomning / rullning)

• Hantera rendering i en loop
• Stödja enheter med enkeltryck (t.ex. Android-telefoner)
• Hantera mushändelser
• Stödja beröringskänsliga datorwebbläsare:
  • Firefox (W3C-stilade beröringshändelser)
  • IE10 (MSPointer*)

@ @ggoodale