W3C werkt aan specificatie voor touch-events

Het World Wide Web Consortium heeft een concept-specificatie uitgebracht die bepaalt hoe browsers met bepaalde touch-events moeten omgaan. Hiermee moet de achterstand die browsers hebben op 'native' apps worden ingehaald.

De specificatie bepaalt hoe browsers touch-events moeten registreren. Daarbij gaat het onder meer om het registreren van druk, maar bijvoorbeeld ook om het waarnemen van de cirkelomvang van een aanraking. De specificatie houdt rekening met multitouch.

Dankzij de specificatie moeten browsers beter rekening kunnen houden met de mogelijkheden van touchscreens. Nu lopen webapplicaties hierin nog achter op applicaties die specifiek voor een platform zijn ontwikkeld.

Een standaard voor touch-events is vooral handig voor ontwikkelaars van webapplicaties. Zo kunnen zij bijvoorbeeld applicaties ontwikkelen die draaien op verschillende browsers. De concept-specificatie is gebaseerd op de specificatie voor touch-events die door Apples Safari wordt gebruikt. Dit staat op de blog van Peter-Paul Koch, een consultant die zich voornamelijk bezighoudt met mobiele browsers.

Reacties (27)

[CJ_Latitude]

Het wordt een beetje onduidelijk omschreven, maar als je het gelinkte W3C-document leest, dan zie je dat het echt gaat om de 'raw' touch-events zoals iig WebKit deze al gedeeltelijk implementeert:

3.2 The touchstart event
3.3 The touchend event
3.4 The touchmove event
3.5 The touchenter event
3.6 The touchleave event
3.7 The touchcancel event

Pinch-to-zoom, rotate en weet ik wat voor dingen moet de webapp dus nog zelf implementeren.

Daarnaast een TouchPoint object voor alle gegevens over een bepaalde enkele touch (druk, radius (vinger vs stylus), positie, etc) en een TouchList object voor een lijst van touch-points (voor multitouch).

Goed dat hier ook al een standaard voor komt. Het blijkt maar weer dat de browser-markt de standaardenorganisatie weer voor is.

Wat ik nog wel hoop is dat er meer interoperabiliteit komt tussen bijv. een mousedown en touchstart event. Ik ben nu bijv. bezig met iets wat ik op een PC met touchscreen wil draaien EN op een iPad. Eerstgenoemde scherm wordt echter gewoon als muis gezien, dus ik moet al mijn event callbacks 2x defenieren: voor de muis EN voor de touch.

[Reactie gewijzigd door CJ_Latitude op 30 juli 2024 04:13]

[Flowmo]

Kan je daar geen "or" voor gebruiken?

[pseudo]
var downevent = (mousedown || touchdown);
[/pseudo]

Was van plan om hier binnenkort ook wat meer onderzoek naar te doen. Het is inderdaad vrij lastig om een gecombineerde webapp te schrijven voor zowel muis als touch.

Ik heb eigenlijk het idee dat iOS Safari voor een touch click ook een mousedown afvuurt ipv alleen een touchstart en touchend. Vereist meer onderzoek...

[Reactie gewijzigd door Flowmo op 30 juli 2024 04:13]

[TheLemon]

Of een eigen event als wrapper schrijven die op basis van feature detectie oid je event doormapt naar de mouse- of touch-events.

[Wolfos]

Maar over het algemeen reageren op zowel mijn MacBook als op mijn Android alle browsers hetzelfde op multitouch. Twee vingers van mekaar af om in te zoomen, andersom om uit te zoomen, twee vingers slepen om te scrollen en drie vingers slepen om in een keer de hele pagina te scrollen.

Allemaal hetzelfde, alleen Opera heeft wat rare gestures (die ik overigens niet gebruik).

[Bosmonster]

Dat is niet iets wat de website doet, maar wat je browser doet. En heeft derhalve ook niks met dit bericht te maken.

Het gaat om het kunnen gebruiken van touch-events binnen je web app. Iets dat vooralsnog niet mogelijk is.

[Reactie gewijzigd door Bosmonster op 30 juli 2024 04:13]

[Flowmo]

Ben ik niet helemaal met je eens, aangezien er genoeg mogelijkheden zijn om touch events op te vangen via javascript. Dat er nog geen universele standaard voor is, is een ander verhaal.

[Verwijderd]

bronnen altijd welkom

[Flowmo]

iOS:
http://developer.apple.co...ouchEvent/TouchEvent.html

Zie ook bovenstaande bron van CJ_Latitude.

Zoals je ziet schort er nogal wat aan de implementatie ervan in verschillende browsers en is het van belang dat hier een standaard voor opgezet wordt (verbaast me dat deze er nog niet allang is, maar ja).

Met iOS kan je bijvoorbeeld al in je browser dingen verslepen, draaien (met twee vingers), etc op basis van een of meerdere touch events. Hier heb ik laatst nog een werkende demo van gevonden, kan hem zo snel even niet meer vinden.

[edit]
Hier o.a. zo'n experiment met multitouch: http://labs.apt.no/2010/0...emoexperiment-for-iphone/

[Reactie gewijzigd door Flowmo op 30 juli 2024 04:13]

[Tharulerz]

http://www.sitepen.com/bl...-gesturing-on-the-iphone/

Deze gebruik ik altijd als ik mobile moet maken op iOS.

Werkt perfect.

[RobertMe]

Tja, je hebt altijd de standaard mousedown + mouseup + mousemove, want zo worden de touch events ook geregistreerd. Volgensmij is deze standaard ook al redelijk geïmplementeerd, de standaard is dan van Apple, met Safari, ik meen dat Opera hem een tijdje terug heeft geïmplementeerd voor Opera Mobile. Chrome/Android ondersteunen het gok ik ook al (samen met Safari), heb je denk ik toch al een redelijk browser aandeel wat het ondersteund

[WimBarelds]

Een poosje geleden heb ik een mobiele versie van een website gemaakt. De website had origineel een menu dat zichtbaar werd als je over de titel van het menu ging met je muis, en verdween als je je muis buiten het menu plaatde.

Deze implementatie leek op het eerste gezicht gewoon te werken op mobiele browsers, tot ik het op een iphone probeerde. Waar andoid bijvoorbeeld er van uit lijkt te gaan dat als je ergens "klikt", dat je muis daar dan ook is (en het menu open bleef na het clicken op de titel), gebeurde er bij de iphone browser helemaal niets (het de :hover psuedo class deed niets).

Ik heb het probleem opgelost door mobiele browsers een javascript gebaseerd menu te genen, maar er is dus wel degelijk een verschillende implementatie op dit moment tussen verschillende mobiele browsers.

[MsG]

Zoals gezegd werken die events niet voor multitouch. Hoe wil je mousemove registreren als er geen muis is, en je met je vinger er gewoon boven zit?

[Flowmo]

Touchmove registreert niet als je je vinger van het scherm haalt. Touchmove begint pas met registreren als je vinger op het scherm is geplaatst en gaat bewegen.

[CJ_Latitude]

Alstublieft:

http://www.quirksmode.org/mobile/tableTouch.html

[Beretta1979]

Je moet het verhaal goed lezen. Het gaat er hier over hoe web applicaties kunnen omgaan met deze touch gestures. Als alle browsers zich houden aan een standaard dan zal je (in theorie) een web applicatie kunnen maken die hetzelfde is voor al die browsers. Op die manier is het makkelijker en goedkoper om een touch web app te maken.

[DJMaze]

Mensen het gaat hier om "events".
Nu registreerd JavaScript dingen als: click, mousemove, mouseover, load, etc.
Maar bij touch is er geen mousemove noch mouseover.

Nieuw events in JavaScript zoals: zoomin, zoomout, pinch met nieuwe attributes zoals radius en pressure zouden hier tot hun recht komen.

Voorbeeld: stel je kan afvangen dat je twee vingers uit elkaar beweegt, en daarmee dan alleen de afbeelding in zoomt.

[Reactie gewijzigd door DJMaze op 30 juli 2024 04:13]

[Rub3s]

dat van dat voorbeeld lijkt me meer een feature van een browser dan een standaard in webtechnieken

maar dat zal wel aan mij liggen

[wkleunen]

Wat is je punt ?

Wat heeft dat met dit bericht te maken ?

[Wolfos]

Mijn punt is dat ze het allemaal toch al hetzelfde doen, ik heb geen enkele browser gezien die andere 'touch events' heeft.

[Verwijderd]

Het artikel is niet helemaal duidelijk, maar volgens mij gaat het om wat de webapp *in* de browser doet, en niet wat de browser zelf doet.

Dat pinch-to-zoom en zo is hoe je browser een pagina laat zien, maar het gaat om wat een webapp doet als je hier-of-daar (of multitouch: hier-en-daar) tikt.

Touch heeft een andere manier van werken dan muisklikken namelijk... Geen mouseovers, geen drag, wel multitouch, wel gestures, etc.

edit: wat Bosmonster hieronder al zegt, eigenlijk... sorry.

[Reactie gewijzigd door Verwijderd op 30 juli 2024 04:13]

[Verwijderd]

Dat lijkt me dan ook direct het grootste probleem... hoe met multitouch omgaan als ook de App zelf (in dit geval de browser) reeds multitouch gebruikt...

Het zou in elk geval wel super handig zijn als sommige 'javascript' rechtermuis menuutjes (zoals bij Hotmail bijvoorbeeld) zouden werken in een browser op een touch-capable apparaat (bijvoorbeeld als er met 2 vingers 'geklikt' wordt).

[TheLemon]

Lijkt me alleen maar goed als dit alleen rudimentair wordt gespecificeerd en niet met een rijtje events als 'pinch', 'fingerswipe', oid. Zoals CJ_Latitude al aangeeft heeft het de voordelen dat je dus later zelfs met tien vingers kunt multitouchen etc., los van of de hardware al zover is.
Het is dan aan de library-bouwers zoals MooTools en jQuery om er handige custom-events van te maken, zoals 'pinch', 'rotate' en wat je allemaal kunt verzinnen.

[Reactie gewijzigd door TheLemon op 30 juli 2024 04:13]

[mOrPhie]

Goeie zaak hoor. De markt vraagt erom en w3c reageert. Hopelijk zal deze specificatie niet jaren op zich laten wachten wegens onenigheid van de stakeholders.