zaterdag 28 juni 2014

Mouse / Touch input cross browser

Ons voorbeeld is noodgedwongen niet cross-browser, dus jullie mogen dit negeren, maar is even voor mijn eigen referentie:
Basic mouse:
http://jsfiddle.net/hD3Xm/

This  should work for all (tested on iPad, Chrome, windows8 tablet):
http://jsfiddle.net/hD3Xm/6/
Enige is, dat bij iedere nieuwe touch ALLE id's wisselen...
Maar ok, dat is dan wel consequent.

Dit werkt, maar het kan moderner, alleen moeten we dan een fallback bedenken:
http://jsfiddle.net/hD3Xm/9/
Ook zijn er in dit voorbeeld geen pointer-id's zodat het herkennen van multi-touch gestures moeilijker is.
Deze kan echter ook pen events detecteren.

http://blogs.msdn.com/b/davrous/archive/2013/02/20/handling-touch-in-your-html5-apps-thanks-to-the-pointer-events-of-ie10-and-windows-8.aspx

Ook is er een polyfill library voor oude browsers en support voor basic-gestures.
Klinkt goed.
Het enige probleem dat ik zie is dat de code WEL werkt voor Windows8, maar niet voor desktop.
In de huidige vorm. Maar het geeft wel aan, welke kant we opgaan.

Voorlopig is hammer.js misschien toch een goeie oplossing?
Hammer helpt alleen niet echt, omdat hun voorbeelden niet werken op windows8.

Dus terug naar wat WEL werkte in de test:
http://jsfiddle.net/hD3Xm/6/

Ik zou het graag via jquery doen, maar aan de andere kant, nodig is het niet.
http://jsfiddle.net/hD3Xm/10/
gebruikt jQeury, maar het stoort niet..


Index schijnt dus te starten bij 1.. En wordt 2, als er twee vingers naar beneden zijn.
Wellicht is de volgorde, waarin de events binnen komen bepalend voor welke vinger we hebben.
Daar zou ik mee kunnen experimenteren.

Voor nu


Geen opmerkingen:

Een reactie posten