getting touchy - an introduction to touch events / web standards days / moscow 24.11.2012
TRANSCRIPT
![Page 1: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/1.jpg)
getting touchy AN INTRODUCTION TO TOUCH EVENTS
Patrick H. Lauke / Web Standards Days / Москва/ 24 November 2012
![Page 2: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/2.jpg)
you don't need touch events
![Page 3: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/3.jpg)
browsers emulate regular mouse events
![Page 4: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/4.jpg)
people.opera.com/patrickl/.../mouse-event-simulation
![Page 5: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/5.jpg)
mouseover > mousemove > mousedown > (focus) > mouseup > click
![Page 6: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/6.jpg)
on first tapmouseover > mousemove > mousedown >
(focus) > mouseup > click
subsequent tapsmousemove > mousedown > (focus) >
mouseup > click
tapping awaymouseout > (blur)
focus/blur only on focusable elements in Opera Mobile and Firefoxmouseout not on iOS Safari and embedded WebView (e.g. iOS Chrome)
![Page 7: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/7.jpg)
emulation works but is limiting/problematic
(more on that in a minute)
![Page 9: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/9.jpg)
touchstart
touchmovetouchend
touchcancel
![Page 10: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/10.jpg)
people.opera.com/patrickl/.../mouse-event-simulation
![Page 11: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/11.jpg)
touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown >
(focus) > mouseup > click
![Page 12: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/12.jpg)
on first taptouchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
subsequent tapstouchstart > [touchmove]+ > touchend > mousemove >
mousedown > (focus) > mouseup > click
tapping awaymouseout > (blur)
too many touchmove events abort the tap (after touchend)not all browsers consistently send the touchmove
![Page 13: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/13.jpg)
limitations/problems of mouse event emulation
![Page 14: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/14.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 15: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/15.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 16: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/16.jpg)
people.opera.com/patrickl/.../touch-delay
![Page 17: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/17.jpg)
simple feature detection for touch events
![Page 18: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/18.jpg)
if ('ontouchstart' in window) {
/* some clever stuff here */
}
![Page 19: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/19.jpg)
/* common performance “trick” */
var event = 'click';
if ('ontouchstart' in window) {
event = 'touchstart';
}
foo.addEventListener(event,function(e)
{
/* execute on click or touch */
}, false);
![Page 20: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/20.jpg)
don't make it touch-exclusive
![Page 21: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/21.jpg)
hybrid devicestouch + mouse + keyboard
![Page 22: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/22.jpg)
/* doubled-up event listeners */
foo.addEventListener('click', function(e) {…}, false);
foo.addEventListener('touchstart', function(e) {…}, false);
![Page 23: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/23.jpg)
/* doubled-up event listeners */
foo.addEventListener('click', function(e) {…},false);
foo.addEventListener('touchstart', function(e) {
…
/* stop mouse event emulation */
e.preventDefault();
},false);
![Page 24: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/24.jpg)
preventDefaultkills scrolling, long-press,
pinch/zoom
![Page 25: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/25.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 26: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/26.jpg)
![Page 27: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/27.jpg)
![Page 28: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/28.jpg)
no isolated hover (or focus) on touch devices
![Page 29: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/29.jpg)
http://developer.apple.com/library/IOS/...
![Page 30: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/30.jpg)
people.opera.com/patrickl/.../css-dropdown
![Page 31: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/31.jpg)
/* pure CSS dropdown */
ul.menu li:hover ul { display: block; }
<ul class="menu"><li><a href="">Menu 1</a></li><li class="submenu"><a href="">Menu 2</a>
<ul>...
</ul></li>
...
</ul>
![Page 32: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/32.jpg)
/* CSS and JS dropdown */
ul.menu li:hover ul,ul.menu li.open ul { display: block; }
/* make it keyboard accessible */
document.querySelectorAll('ul.menu li.submenu > a').addEventListener('focus', function(e) {
...
this.parentNode.classList.add('open');
},false);
![Page 33: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/33.jpg)
/* CSS and JS dropdown */
ul.menu li:hover ul,ul.menu li.open ul { display: block; }
/* touch opens menu */
document.querySelectorAll('ul.menu li.submenu > a').addEventListener('touchstart', function(e) {
...if (!this.parentNode.classList.contains('open')) {
...this.parentNode.classList.add('open');e.preventDefault();
}
},false);
![Page 34: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/34.jpg)
1. delayed event dispatch2. mouse-specific interfaces3. mousemove doesn't track
![Page 35: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/35.jpg)
people.opera.com/patrickl/experiments/canvas/particle/2
![Page 36: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/36.jpg)
var posX, posY;
...
function positionHandler(e) {
posX = e.clientX;
posY = e.clientY;
}
...
canvas.addEventListener('mousemove', positionHandler, false);
![Page 37: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/37.jpg)
interface MouseEvent : UIEvent {readonly attribute long screenX;readonly attribute long screenY;readonly attribute long clientX;readonly attribute long clientY;readonly attribute boolean ctrlKey;readonly attribute boolean shiftKey;readonly attribute boolean altKey;readonly attribute boolean metaKey;readonly attribute unsigned short button;readonly attribute EventTarget relatedTarget;void initMouseEvent(...);
};
www.w3.org/TR/DOM-Level-2-Events ...
![Page 38: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/38.jpg)
var posX, posY;
...
function positionHandler(e) {/* handle both mouse and touch? */
}
...
canvas.addEventListener('mousemove',positionHandler, false);
canvas.addEventListener('touchmove',positionHandler, false);
![Page 39: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/39.jpg)
interface TouchEvent : UIEvent {readonly attribute TouchList touches;readonly attribute TouchList targetTouches;readonly attribute TouchList changedTouches;readonly attribute boolean altKey;readonly attribute boolean metaKey;readonly attribute boolean ctrlKey;readonly attribute boolean shiftKey;
};
www.w3.org/TR/touch-events
![Page 40: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/40.jpg)
interface Touch {readonly attribute long identifier;readonly attribute EventTarget target;readonly attribute long screenX;readonly attribute long screenY;readonly attribute long clientX;readonly attribute long clientY;readonly attribute long pageX;readonly attribute long pageY;
};
www.w3.org/TR/touch-events
![Page 41: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/41.jpg)
var posX, posY;
...
function positionHandler(e) {if ((e.clientX)&&(e.clientY)) {
posX = e.clientX;posY = e.clientY;
} else if (e.targetTouches) {posX = e.targetTouches[0].clientX;posY = e.targetTouches[0].clientY;e.preventDefault();
}}
...
canvas.addEventListener('mousemove',positionHandler, false );
canvas.addEventListener('touchmove',positionHandler, false );
![Page 42: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/42.jpg)
people.opera.com/patrickl/experiments/canvas/particle/3
![Page 43: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/43.jpg)
people.opera.com/patrickl/experiments/canvas/particle/4
![Page 44: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/44.jpg)
people.opera.com/patrickl/.../ratchet-slider
![Page 45: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/45.jpg)
touchmove fires...a lot!
![Page 46: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/46.jpg)
people.opera.com/patrickl/.../touch-limit
![Page 47: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/47.jpg)
why stop at a single point?multitouch support
![Page 48: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/48.jpg)
for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;
posY = e.targetTouches[i].clientY;
/* do something clever */
}
![Page 49: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/49.jpg)
people.opera.com/patrickl/.../tracker/
![Page 50: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/50.jpg)
multitouch gestures
![Page 51: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/51.jpg)
/* iOS Safari has gesture events for size/rotation
with some trigonometry we can make this x-browser */
var distance = Math.sqrt(Math.pow(...)+Math.pow(...));
var angle = Math.atan2(...);
![Page 52: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/52.jpg)
people.opera.com/patrickl/.../pinch-zoom-rotate
![Page 54: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/54.jpg)
touch events and IE10
![Page 55: Getting touchy - an introduction to touch events / Web Standards Days / Moscow 24.11.2012](https://reader036.vdocuments.net/reader036/viewer/2022062703/554e245ab4c90511778b50b7/html5/thumbnails/55.jpg)
blogs.msdn.com/...