SlideShare a Scribd company logo
mouseover > mousemove* > mousedown >
(focus) > mouseup > click
mouseover > mousemove > mousedown >
(focus) > mouseup > click

mousemove > mousedown > (focus) >
mouseup > click

mouseout > (blur)
focus/blur
mouseout
touchstart
touchmove
touchend
touchcancel
touchenter
touchleave
touchstart > [touchmove]+ > touchend >
mouseover > mousemove > mousedown >
(focus) > mouseup > click
touchstart > [touchmove]+ > touchend > mouseover >
mousemove > mousedown > (focus) > mouseup > click

touchstart > [touchmove]+ > touchend > mousemove >
mousedown > (focus) > mouseup > click

mouseout > (blur)

touchmove

touchend
touchmove
mouseover > mousemove > touchstart > touchend > mousedown >
mouseup > click

touchstart > mouseover > mousemove > mousedown > touchend >
mouseup > click
if ('ontouchstart' in window) {
/* some clever stuff here */

}
/* common performance “trick” */
var clickEvent = ('ontouchstart' in window ?
'touchend' : 'click');
blah.addEventListener(clickEvent,
function() { ... }, false);
if ('ontouchstart' in window) {
/* browser supports touch events
but user is not necessarily
using touch (exclusively) */
}
touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
mouseover > mousedown > mousemove > mouseup > click
focus > click
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
focus > touchstart > touchend > mouseover > mousemove > mousedown
blur > mouseup > click
focus > blur > mousedown > mouseup > click > focus(?)
/* doubled-up event listeners */
foo.addEventListener('touchstart',
someFunction, false);

foo.addEventListener('click',
someFunction, false);
/* doubled-up event listeners */
foo.addEventListener('touchstart',
function(e) {
/* prevent delay+mouse events */
e.preventDefault();
someFunction();
/* or even e.target.click(); */
}, false);
foo.addEventListener('click',
someFunction, false);
preventDefault
touchstart > [touchmove]+ > touchend >
mouseover > mousemove* > mousedown >
(focus) > mouseup > click
mousemove

touchmove
var posX, posY;

...
function positionHandler(e) {
posX = e.clientX;
posY = e.clientY;
}
...

canvas.addEventListener('mousemove',
positionHandler, false);
var posX, posY;
...
function positionHandler(e) {
/* handle both mouse and touch? */
}
...
canvas.addEventListener('mousemove',
positionHandler, false);
canvas.addEventListener('touchmove',
positionHandler, false);
interface MouseEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
relatedTarget;
void
};

UIEvent {
long
long
long
long
boolean
boolean
boolean
boolean
unsigned short
EventTarget

screenX;
screenY;
clientX;
clientY;
ctrlKey;
shiftKey;
altKey;
metaKey;
button;

initMouseEvent(...);
interface TouchEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
};

UIEvent {
TouchList
TouchList
TouchList
boolean
boolean
boolean
boolean

touches;
targetTouches;
changedTouches;
altKey;
metaKey;
ctrlKey;
shiftKey;
interface Touch {
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
};

long
EventTarget
long
long
long
long
long
long

identifier;
target;
screenX;
screenY;
clientX;
clientY;
pageX;
pageY;
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 );
touchmove
touchmove
requestAnimationFrame
setInterval
interface TouchEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
};

UIEvent {
TouchList
TouchList
TouchList
boolean
boolean
boolean
boolean

touches;
targetTouches;
changedTouches;
altKey;
metaKey;
ctrlKey;
shiftKey;
for (i=0; i<e.targetTouches.length; i++) {
...
posX = e.targetTouches[i].clientX;
posY = e.targetTouches[i].clientY;
...
}
preventDefault()
preventDefault()
/* iOS/Safari has gesture events for size/rotation,
not supported in Chrome/Firefox/Opera,
not part of the W3C Touch Events spec. */
gesturestart, gesturechange, gestureend
e.scale, e.rotation
/* with some trigonometry we can replicate these
from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow(...));
var angle = Math.atan2(...);
pointerover > mouseover >
pointerdown > mousedown >
pointermove > mousemove >
(focus) >
pointerup > mouseup >
pointerout > mouseout >
click
pointerenter
pointerleave
gotpointercapture
lostpointercapture
MSPointerDown
MSPointerMove
MSPointerUp
navigator.msPointerEnabled
navigator.msMaxTouchPoints
-ms-touch-action
interface MouseEvent :
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
relatedTarget;
void
};

UIEvent {
long
long
long
long
boolean
boolean
boolean
boolean
unsigned short
EventTarget

screenX;
screenY;
clientX;
clientY;
ctrlKey;
shiftKey;
altKey;
metaKey;
button;

initMouseEvent(...);
/* Pointer Events extend Mouse Events
vs Touch Events and their completely new objects/arrays */

interface PointerEvent : MouseEvent
readonly
attribute long
readonly
attribute long
readonly
attribute long
readonly
attribute float
readonly
attribute long
readonly
attribute long
readonly
attribute DOMString
readonly
attribute boolean
};

{
pointerId;
width;
height;
pressure;
tiltX;
tiltY;
pointerType;
isPrimary;
preventDefault()
pointerdown
touch-action: auto|none|[pan-x][pan-y]
touch-action:none
touch-action:none
touch-action:none
/* PointerEvents don't have the handy touch arrays,
so we have to replicate something similar... */
/* PointerEvents don't have the handy touch arrays,
so we have to replicate something similar... */
var points = [];
switch (e.type) {
case 'pointerdown':
/* add to the array */
break;
case 'pointermove':
/* update the relevant array entry's x and y */
break;

case 'pointerup':
/* remove the relevant array entry */
break;
}
/* like iOS/Safari, IE10/Win has higher-level gestures,
but these are not part of the W3C Pointer Events spec.
Replicate these from basic principles again? */
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013
Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013

More Related Content

What's hot

Creating custom views
Creating custom viewsCreating custom views
Creating custom views
Mu Chun Wang
 
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic listFlash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Small Screen Design
 
The touch events - WebExpo
The touch events - WebExpoThe touch events - WebExpo
The touch events - WebExpo
Peter-Paul Koch
 

What's hot (17)

Getting touchy - an introduction to touch and pointer events (complete master...
Getting touchy - an introduction to touch and pointer events (complete master...Getting touchy - an introduction to touch and pointer events (complete master...
Getting touchy - an introduction to touch and pointer events (complete master...
 
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
 
Cocoaheads
CocoaheadsCocoaheads
Cocoaheads
 
Control de acceso con excel
Control de acceso con excelControl de acceso con excel
Control de acceso con excel
 
Flappy bird
Flappy birdFlappy bird
Flappy bird
 
Ms Ajax Dom Event Class
Ms Ajax Dom Event ClassMs Ajax Dom Event Class
Ms Ajax Dom Event Class
 
Phonegap for Android
Phonegap for AndroidPhonegap for Android
Phonegap for Android
 
Keyboard and mouse events in python
Keyboard and mouse events in pythonKeyboard and mouse events in python
Keyboard and mouse events in python
 
Crush Candy with DukeScript
Crush Candy with DukeScriptCrush Candy with DukeScript
Crush Candy with DukeScript
 
The Ring programming language version 1.7 book - Part 59 of 196
The Ring programming language version 1.7 book - Part 59 of 196The Ring programming language version 1.7 book - Part 59 of 196
The Ring programming language version 1.7 book - Part 59 of 196
 
The Ring programming language version 1.10 book - Part 71 of 212
The Ring programming language version 1.10 book - Part 71 of 212The Ring programming language version 1.10 book - Part 71 of 212
The Ring programming language version 1.10 book - Part 71 of 212
 
Getting touchy - an introduction to touch and pointer events / Smashing Confe...
Getting touchy - an introduction to touch and pointer events / Smashing Confe...Getting touchy - an introduction to touch and pointer events / Smashing Confe...
Getting touchy - an introduction to touch and pointer events / Smashing Confe...
 
Creating custom views
Creating custom viewsCreating custom views
Creating custom views
 
The Ring programming language version 1.2 book - Part 34 of 84
The Ring programming language version 1.2 book - Part 34 of 84The Ring programming language version 1.2 book - Part 34 of 84
The Ring programming language version 1.2 book - Part 34 of 84
 
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic listFlash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
 
The touch events - WebExpo
The touch events - WebExpoThe touch events - WebExpo
The touch events - WebExpo
 
Introduzione ad Autopilot
Introduzione ad AutopilotIntroduzione ad Autopilot
Introduzione ad Autopilot
 

Viewers also liked

HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
Patrick Lauke
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
Patrick Lauke
 
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Patrick Lauke
 
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Patrick Lauke
 
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Patrick Lauke
 
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Patrick Lauke
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Patrick Lauke
 
Sbs Best Practices Intro 30.11.2009
Sbs Best Practices Intro 30.11.2009Sbs Best Practices Intro 30.11.2009
Sbs Best Practices Intro 30.11.2009
Patrick Lauke
 
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Patrick Lauke
 
Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010
Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010
Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010
Patrick Lauke
 
World Usability Day Keyboard Accessibility 12.11.2009
World Usability Day Keyboard Accessibility 12.11.2009World Usability Day Keyboard Accessibility 12.11.2009
World Usability Day Keyboard Accessibility 12.11.2009
Patrick Lauke
 
The once and future web - Front Row Conference Krakow 20.10.2011
The once and future web - Front Row Conference Krakow 20.10.2011The once and future web - Front Row Conference Krakow 20.10.2011
The once and future web - Front Row Conference Krakow 20.10.2011
Patrick Lauke
 
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Patrick Lauke
 

Viewers also liked (18)

HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
 
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
 
Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011
 
Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010
 
Webseiten für mobile Geräte - MobileTech Conference 2010 Mainz
Webseiten für mobile Geräte - MobileTech Conference 2010 MainzWebseiten für mobile Geräte - MobileTech Conference 2010 Mainz
Webseiten für mobile Geräte - MobileTech Conference 2010 Mainz
 
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
Getting touchy - an introduction to touch and pointer events / Web Rebels / O...
 
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
 
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
 
Sbs Best Practices Intro 30.11.2009
Sbs Best Practices Intro 30.11.2009Sbs Best Practices Intro 30.11.2009
Sbs Best Practices Intro 30.11.2009
 
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
 
Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010
Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010
Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010
 
World Usability Day Keyboard Accessibility 12.11.2009
World Usability Day Keyboard Accessibility 12.11.2009World Usability Day Keyboard Accessibility 12.11.2009
World Usability Day Keyboard Accessibility 12.11.2009
 
Webtech 17.11.2009
Webtech 17.11.2009Webtech 17.11.2009
Webtech 17.11.2009
 
HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
 
The once and future web - Front Row Conference Krakow 20.10.2011
The once and future web - Front Row Conference Krakow 20.10.2011The once and future web - Front Row Conference Krakow 20.10.2011
The once and future web - Front Row Conference Krakow 20.10.2011
 
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
 

Similar to Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013

Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Patrick Lauke
 
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2...
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2...Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2...
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2...
Patrick Lauke
 
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Patrick Lauke
 
Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Patrick Lauke
 
Getting touchy - an introduction to touch and pointer events (Workshop) / Jav...
Getting touchy - an introduction to touch and pointer events (Workshop) / Jav...Getting touchy - an introduction to touch and pointer events (Workshop) / Jav...
Getting touchy - an introduction to touch and pointer events (Workshop) / Jav...
Patrick Lauke
 
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Patrick Lauke
 
Selenium 2 User Interactions API
Selenium 2 User Interactions APISelenium 2 User Interactions API
Selenium 2 User Interactions API
davehunt82
 

Similar to Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013 (20)

Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
 
Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events
Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer eventsPatrick H. Lauke - Getting Touchy; an introduction to touch and pointer events
Patrick H. Lauke - Getting Touchy; an introduction to touch and pointer events
 
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2...
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2...Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2...
Getting touchy - Introduction to touch (and pointer) events / jQuery Europe 2...
 
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
Getting touchy - an introduction to touch events / Webinale / Berlin 04.06.2013
 
Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...
 
Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...Getting touchy - an introduction to touch and pointer events (1 day workshop)...
Getting touchy - an introduction to touch and pointer events (1 day workshop)...
 
The touch events
The touch eventsThe touch events
The touch events
 
Getting touchy - an introduction to touch and pointer events (Workshop) / Jav...
Getting touchy - an introduction to touch and pointer events (Workshop) / Jav...Getting touchy - an introduction to touch and pointer events (Workshop) / Jav...
Getting touchy - an introduction to touch and pointer events (Workshop) / Jav...
 
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
Getting touchy - an introduction to touch and pointer events / Workshop / Jav...
 
Getting Touchy Feely with the Web
Getting Touchy Feely with the WebGetting Touchy Feely with the Web
Getting Touchy Feely with the Web
 
Journey of an event, the android touch - Marco Cova, Facebook
Journey of an event, the android touch - Marco Cova, FacebookJourney of an event, the android touch - Marco Cova, Facebook
Journey of an event, the android touch - Marco Cova, Facebook
 
I os 15
I os 15I os 15
I os 15
 
Actionscript 3 - Session 6 Interactivity
Actionscript 3 - Session 6 InteractivityActionscript 3 - Session 6 Interactivity
Actionscript 3 - Session 6 Interactivity
 
Selenium 2 User Interactions API
Selenium 2 User Interactions APISelenium 2 User Interactions API
Selenium 2 User Interactions API
 
Yahoo presentation: JavaScript Events
Yahoo presentation: JavaScript EventsYahoo presentation: JavaScript Events
Yahoo presentation: JavaScript Events
 
Sperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copySperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copy
 
Day 5
Day 5Day 5
Day 5
 
Yui mobile
Yui mobileYui mobile
Yui mobile
 
Android Accessibility
Android AccessibilityAndroid Accessibility
Android Accessibility
 
Android Event and IntentAndroid Event and Intent
Android Event and IntentAndroid Event and IntentAndroid Event and IntentAndroid Event and Intent
Android Event and IntentAndroid Event and Intent
 

More from Patrick Lauke

More from Patrick Lauke (20)

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
 
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
 
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
 
Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...
 
Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...
 
Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...
 
All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...
 
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
 
Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...
 
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
 
The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007
 
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Transforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UXTransforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UX
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Enterprise Security Monitoring, And Log Management.
Enterprise Security Monitoring, And Log Management.Enterprise Security Monitoring, And Log Management.
Enterprise Security Monitoring, And Log Management.
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
The architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdfThe architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdf
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Motion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in TechnologyMotion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in Technology
 
Intelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdfIntelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdf
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT Professionals
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 

Getting touchy - an introduction to touch and pointer events / Future of Web Apps / London 24.10.2013

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7. mouseover > mousemove* > mousedown > (focus) > mouseup > click
  • 8. mouseover > mousemove > mousedown > (focus) > mouseup > click mousemove > mousedown > (focus) > mouseup > click mouseout > (blur) focus/blur mouseout
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 21.
  • 22.
  • 23. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click
  • 24. touchstart > [touchmove]+ > touchend > mouseover > mousemove > mousedown > (focus) > mouseup > click touchstart > [touchmove]+ > touchend > mousemove > mousedown > (focus) > mouseup > click mouseout > (blur) touchmove touchend touchmove
  • 25. mouseover > mousemove > touchstart > touchend > mousedown > mouseup > click touchstart > mouseover > mousemove > mousedown > touchend > mouseup > click
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34. if ('ontouchstart' in window) { /* some clever stuff here */ }
  • 35. /* common performance “trick” */ var clickEvent = ('ontouchstart' in window ? 'touchend' : 'click'); blah.addEventListener(clickEvent, function() { ... }, false);
  • 36.
  • 37.
  • 38. if ('ontouchstart' in window) { /* browser supports touch events but user is not necessarily using touch (exclusively) */ }
  • 39.
  • 40.
  • 41.
  • 42. touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
  • 43. mouseover > mousedown > mousemove > mouseup > click
  • 45.
  • 46. focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  • 47. focus > touchstart > touchend > mouseover > mousemove > mousedown blur > mouseup > click
  • 48. focus > blur > mousedown > mouseup > click > focus(?)
  • 49.
  • 50.
  • 51. /* doubled-up event listeners */ foo.addEventListener('touchstart', someFunction, false); foo.addEventListener('click', someFunction, false);
  • 52. /* doubled-up event listeners */ foo.addEventListener('touchstart', function(e) { /* prevent delay+mouse events */ e.preventDefault(); someFunction(); /* or even e.target.click(); */ }, false); foo.addEventListener('click', someFunction, false);
  • 53.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67. touchstart > [touchmove]+ > touchend > mouseover > mousemove* > mousedown > (focus) > mouseup > click
  • 69. var posX, posY; ... function positionHandler(e) { posX = e.clientX; posY = e.clientY; } ... canvas.addEventListener('mousemove', positionHandler, false);
  • 70. var posX, posY; ... function positionHandler(e) { /* handle both mouse and touch? */ } ... canvas.addEventListener('mousemove', positionHandler, false); canvas.addEventListener('touchmove', positionHandler, false);
  • 71. interface MouseEvent : readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute relatedTarget; void }; UIEvent { long long long long boolean boolean boolean boolean unsigned short EventTarget screenX; screenY; clientX; clientY; ctrlKey; shiftKey; altKey; metaKey; button; initMouseEvent(...);
  • 72. interface TouchEvent : readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute }; UIEvent { TouchList TouchList TouchList boolean boolean boolean boolean touches; targetTouches; changedTouches; altKey; metaKey; ctrlKey; shiftKey;
  • 73. interface Touch { readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute }; long EventTarget long long long long long long identifier; target; screenX; screenY; clientX; clientY; pageX; pageY;
  • 74. 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 );
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 88.
  • 89.
  • 90. interface TouchEvent : readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute }; UIEvent { TouchList TouchList TouchList boolean boolean boolean boolean touches; targetTouches; changedTouches; altKey; metaKey; ctrlKey; shiftKey;
  • 91. for (i=0; i<e.targetTouches.length; i++) { ... posX = e.targetTouches[i].clientX; posY = e.targetTouches[i].clientY; ... }
  • 92.
  • 95.
  • 96. /* iOS/Safari has gesture events for size/rotation, not supported in Chrome/Firefox/Opera, not part of the W3C Touch Events spec. */ gesturestart, gesturechange, gestureend e.scale, e.rotation
  • 97. /* with some trigonometry we can replicate these from basic principles. */ var distance = Math.sqrt(Math.pow(...)+Math.pow(...)); var angle = Math.atan2(...);
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109. pointerover > mouseover > pointerdown > mousedown > pointermove > mousemove > (focus) > pointerup > mouseup > pointerout > mouseout > click
  • 112. interface MouseEvent : readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute readonly attribute relatedTarget; void }; UIEvent { long long long long boolean boolean boolean boolean unsigned short EventTarget screenX; screenY; clientX; clientY; ctrlKey; shiftKey; altKey; metaKey; button; initMouseEvent(...);
  • 113. /* Pointer Events extend Mouse Events vs Touch Events and their completely new objects/arrays */ interface PointerEvent : MouseEvent readonly attribute long readonly attribute long readonly attribute long readonly attribute float readonly attribute long readonly attribute long readonly attribute DOMString readonly attribute boolean }; { pointerId; width; height; pressure; tiltX; tiltY; pointerType; isPrimary;
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 123.
  • 125.
  • 126.
  • 128.
  • 129.
  • 130.
  • 131. /* PointerEvents don't have the handy touch arrays, so we have to replicate something similar... */
  • 132. /* PointerEvents don't have the handy touch arrays, so we have to replicate something similar... */ var points = []; switch (e.type) { case 'pointerdown': /* add to the array */ break; case 'pointermove': /* update the relevant array entry's x and y */ break; case 'pointerup': /* remove the relevant array entry */ break; }
  • 133.
  • 134. /* like iOS/Safari, IE10/Win has higher-level gestures, but these are not part of the W3C Pointer Events spec. Replicate these from basic principles again? */