IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

https://patrickhlauke.github.io/getting-touchy-presentation/

Click vs Tap (Touch)

Supporting Click: Mobile browsers that support touch event bindings (eg, Webkit) also have to support click bindings on the same element, otherwise webpages built for the desktop would be completely useless on mobile browsers. So for every tap on a mobile web page a click is fired right along with it.

https://coderwall.com/p/bdxjzg/tap-vs-click-death-by-ignorance

Suport HTML 5

Vegeu cainuse:

http://caniuse.com/#search=touch

Requeriments

Per que els esdeveniments de touch funcionin correctament cal desactivar el zoom al viewport:

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

Recordeu que amb Emmet simplement escrivint meta:vp + tab us crea aquest meta que e fet és l'habitual del RWD

Touch events

Existeixen 3 esdeveniments de toc o Touch events:

  • touchstart: se coloca un dedo sobre un elemento DOM.
  • touchmove: se arrastra un dedo a lo largo de un elemento DOM.
  • touchend: se quita un dedo de un elemento DOM.

I cada esdeveniment té tres llistes/arrays:

  • touches: indica una lista de todos los dedos con los que se está tocando la pantalla.
  • targetTouches: indica una lista de los dedos que están colocados sobre el elemento DOM actual.
  • changedTouches: indica una lista de los dedos que se utilizan en el evento actual. Por ejemplo, en un evento "touchend", será el dedo que se ha retirado.

Aquestes llistes es composem d'objectes que inclouen la informació d'un touch:

  • identifier: representa un número que identifica de forma exclusiva al dedo que se está utilizando en la sesión de toque.
  • target: representa el elemento DOM que constituye el destino de la acción.
  • client/page/screen coordinates: indica la parte de la pantalla en la que se lleva a cabo la acción.
  • radius coordinates y rotationAngle: describe la elipse que dibuja la forma del dedo.

Resources:

Forma recomanda /Trick

/* common performance “trick” */

var clickEvent =
    ('ontouchstart' in window ? 'touchend' : 'click');

blah.addEventListener(clickEvent, function() { ... }, false);

Detectar el suport

/* feature detection for touch events */

if ('ontouchstart' in window) {
    /* some clever stuff here */
}

/* older browsers have flaky support so more
   hacky tests needed...use Modernizr.touch or similar */

Vegeu Modernizr i l'opció Modernizr.touch.

Tap i double Tap an 300ms delay

NOTA: les versions modernes del navegador desactiven aquesta delay i encara poden permetre el zoom en doble tap (sinó s'ha desactivat que sol ser el cas en RWD) al utilitzar el típic meta:vp com el que s'utilitza amb bootstrap o similars. https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away

Vegeu un exemple a:

http://paulkinlan.github.io/touch-patterns/touch-event-order-with-fixed-viewport.html

Si feu un doble tap (dos taps amb una diferència de temps inferior a 300ms) veureu que l'esdeviment click no s'executa. Això és així per què hi ha un delay de 300ms abans s'executi l'esdeveniment onclick per diferenciar d'un doble tap. Aquesta és la raó per la que hi ha un pettit delay en webs que només responen als esdeveniment onclick i no tenen en compte els esdeveniment touch,

També podeu veure el delay a aquest exemple:

https://patrickhlauke.github.io/touch/tests/event-listener_show-delay.html

Resources:

Pointer Events

https://mobiforge.com/design-development/html5-pointer-events-api-combining-touch-mouse-and-pen
https://mobiforge.com/news-comment/who-wants-pointer-events-api-everyone-nearly
El suport ha millorat molt: Vegeu CanIUse: http://caniuse.com/#search=pointer%20events

OBSOLET: Només suportat per Internet Explorer ultimes versions permet integrar en una sola funcionalitat els esdeveniments de click i de touch. Només es pot utilitzar fora de Internet Explorer actualment (--acacha (discussió) 12:16, 15 gen 2016 (CET)) amb algun Polyfill com HandJS

Pointer Events/Pointer events

Esdeveniments:

mousedown	pointerdown
mouseenter	pointerenter
mouseleave	pointerleave
mousemove	pointermove
mouseout	pointerout
mouseover	pointerover
mouseup	pointerup

Codi exemple:

"use strict";

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var pointers; // collections of pointers

var canvas,
c; // c is the canvas' context 2D

document.addEventListener("DOMContentLoaded", init);

window.onorientationchange = resetCanvas;
window.onresize = resetCanvas;

function init() {
    setupCanvas();
    pointers = new Collection();
    canvas.addEventListener('pointerdown', onPointerDown, false);
    canvas.addEventListener('pointermove', onPointerMove, false);
    canvas.addEventListener('pointerup', onPointerUp, false);
    canvas.addEventListener('pointerout', onPointerUp, false);
    requestAnimFrame(draw);
}

Resources

Exemples

Un Joystick touch (vegeu també Gamepad API):

http://www.sitepoint.com/create-a-cross-browser-touch-based-joystick-with-hand-js/

Gestures

Vegeu Gestures

CSS

Exemples/Samples

Patrick Hlauke

Vegeu:

https://patrickhlauke.github.io/touch

Multitouch painting on HTML Canvas

Demo:

http://acacha.github.io/multitouchPaintingOnCanvas/

Codi:

https://github.com/acacha/multitouchPaintingOnCanvas
https://github.com/acacha/multitouchPaintingOnCanvas/blob/master/index.html

Creat per Paul Irish i altres:

http://www.paulirish.com/demo/multi

Llibreries

Chrome

Es pot activar el suport per a Touch a l'apartat Sensors de More Tools (obrint el boto de 3 punts verticals!)

Vegeu també

Enllaços externs