Kosketustapahtumat

On mahdollista kirjoittaa kosketukselle herkkiä sovelluksia, jotka toimivat useilla mobiililaitteilla. Kosketustukea tarjoavat työpöytäselaimet ovat jo ovella; valmistaudu nyt.

Ensimmäisen kerran mukana mobile Safarissa iOS-versiossa 2.0.

Neljä perustapahtumaa:

• touchstart
• touchmove
• touchend
• touchcancel

Tapahtumaolion kentät:

• touches
• targetTouches
• changedTouches
• Muunnosnäppäimet (shift, alt, ctrl, meta)

Kosketusolion kentät:

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

Nykyään W3C:n työstämä luonnos.

Aiheeseen liittyvä: Construct 3 — Selainpohjainen, kooditon HTML5-moottori, joka viedään verkkoon, mobiililaitteille ja pöytäkoneille.

Toimittajien välillä on edelleen paljon eroja:

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

Natiivin kaltainen käyttäytyminen

• Laitteet, joissa on vaihtoehtoisia syöttömenetelmiä
• Monikosketus
• FF6+ tukee W3C-tyylisiä kosketustapahtumia
• IE10:ssä MSPointer* / MSGesture*
• Ei tukea vielä WebKitissä

Estä vakioeleiden käsittely (panorointi / zoomaus / vieritys):

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

ja

Meidän valintamme: Udemy Game Development Courses — On-demand-kurssit, jotka kattavat Unity-, Unreal-, C++-, C#- ja Shader-ohjelmoinnin.

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

Estä vakioeleiden käsittely (panorointi / zoomaus / vieritys). Hoida renderöinti silmukassa:

var touches = [], // tässä voisi käyttää myös requestAnimationFrame()-funktiota
renderLoop = setInterval(function() {
  draw(touches); // kutsu piirtofunktioitamme
}, 15);

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

Estä vakioeleiden käsittely (panorointi / zoomaus / vieritys). Hoida renderöinti silmukassa. Tue yhden kosketuksen laitteita (esim. Android-puhelimet).

Estä vakioeleiden käsittely (panorointi / zoomaus / vieritys). Hoida renderöinti silmukassa. Tue yhden kosketuksen laitteita (esim. Android-puhelimet). Hoida hiiritapahtumat seuraaville:

• Puhelimet, joissa on fyysinen osoitinlaitteisto (esim. monet Android-käsilaitteet)
• Puhelimet, joissa ei ole kosketustapahtumia (esim. Windows Phone 7)
• Työpöytäselaimet ilman kosketustukea (esim. Chrome)

Estä vakioeleiden käsittely (panorointi / zoomaus / vieritys). Hoida renderöinti silmukassa. Tue yhden kosketuksen laitteita (esim. Android-puhelimet). Hoida hiiritapahtumat. Tue kosketusta tukevia työpöytäselaimia:

• Firefox (W3C-tyyliset kosketustapahtumat)
• IE10 (MSPointer*)

@ @ggoodale