Berøringsbegivenheder

Det er muligt at skrive berøringsbevidste apps, der fungerer på tværs af mange mobile enheder. Berøringsbevidste desktop-browsere er næsten her; gør dig klar nu.

Første gang det optrådte i Mobile Safari til iOS 2.0.

Fire grundlæggende begivenheder:

• touchstart
• touchmove
• touchend
• touchcancel

Felter i begivenhedsobjektet:

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

Felter i berøringsobjektet:

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

Nu et W3C Working Draft.

Relateret: Construct 3 — Browserbaseret HTML5-motor uden kode, der eksporterer til web, mobil og desktop.

Der findes stadig mange forskelle mellem leverandørerne:

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

Adfærd som i native apps

• Enheder med alternative inputmetoder
• Multi-touch
• FF6+ understøtter W3C-stil berøringsbegivenheder
• IE10 har MSPointer* / MSGesture*
• Ingen understøttelse i WebKit endnu

Deaktivér standardhåndtering af bevægelser (pan/zoom/rul)

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> og document.body.addEventListener('touchmove', function(event) { event.preventDefault(); }, false);

Deaktivér standardhåndtering af bevægelser (pan/zoom/rul)

Håndtér rendering i en løkke:

Vores valg: Udemy Game Development Courses — On-demand kurser, der dækker Unity, Unreal, C++, C# og shader programmering.

var touches = [], // kunne også bruge requestAnimationFrame() her
renderLoop = setInterval(function() {
  draw(touches); // kald vores draw-funktion
}, 15);
myElement.addEventListener('touchmove', function(e) {
  touches = e.touches;
}, false);

Deaktivér standardhåndtering af bevægelser (pan/zoom/rul)

Håndtér rendering i en løkke.

Understøt enheder med enkeltberøring (f.eks. Android-telefoner)

Deaktivér standardhåndtering af bevægelser (pan/zoom/rul).

Håndtér rendering i en løkke

Understøt enheder med enkeltberøring (f.eks. Android-telefoner).

Håndtér musebegivenheder for:

• Telefoner med fysisk pegehardware (f.eks. mange Android-håndsæt)
• Telefoner uden berøringsbegivenheder (f.eks. Windows Phone 7)
• Desktop-browsere uden berøringsunderstøttelse (f.eks. Chrome)

Deaktivér standardhåndtering af bevægelser (pan/zoom/rul).

Håndtér rendering i en løkke

Understøt enheder med enkeltberøring (f.eks. Android-telefoner).

Håndtér musebegivenheder

Understøt berøringsaktiverede desktop-browsere:

Relateret: Amazon: Game Dev Books & Gear — Spilprogrammeringsbøger, mekaniske tastaturer, skærme og dev-desk hardware.

• Firefox (W3C-stil berøringsbegivenheder)
• IE10 (MSPointer*)

@ @ggoodale