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

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...
Patrick Lauke
 
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 / ...
Patrick Lauke
 
Cocoaheads
CocoaheadsCocoaheads
Cocoaheads
Benjamin Pisano
 
Control de acceso con excel
Control de acceso con excelControl de acceso con excel
Control de acceso con excel
Reember Alex Arteaga Ticona
 
Flappy bird
Flappy birdFlappy bird
Flappy bird
SantiagoYepesSerna
 
Ms Ajax Dom Event Class
Ms Ajax Dom Event ClassMs Ajax Dom Event Class
Ms Ajax Dom Event Class
jason hu 金良胡
 
Phonegap for Android
Phonegap for AndroidPhonegap for Android
Phonegap for Android
Dr. Ramkumar Lakshminarayanan
 
Keyboard and mouse events in python
Keyboard and mouse events in pythonKeyboard and mouse events in python
Keyboard and mouse events in python
mal6ayer
 
Crush Candy with DukeScript
Crush Candy with DukeScriptCrush Candy with DukeScript
Crush Candy with DukeScript
Anton Epple
 
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
Mahmoud Samir Fayed
 
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
Mahmoud Samir Fayed
 
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...
Patrick Lauke
 
Creating custom views
Creating custom viewsCreating custom views
Creating custom views
Mu Chun Wang
 
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
Mahmoud Samir Fayed
 
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
 
Introduzione ad Autopilot
Introduzione ad AutopilotIntroduzione ad Autopilot
Introduzione ad Autopilot
Marco Trevisan
 

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
 
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
Patrick Lauke
 
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
Patrick Lauke
 
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
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.2010Patrick 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
 
Webtech 17.11.2009
Webtech 17.11.2009Webtech 17.11.2009
Webtech 17.11.2009
Patrick Lauke
 
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
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
 
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
DevConFu
 
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 (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
 
The touch events
The touch eventsThe touch events
The touch events
Peter-Paul Koch
 
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
 
Getting Touchy Feely with the Web
Getting Touchy Feely with the WebGetting Touchy Feely with the Web
Getting Touchy Feely with the Web
Andrew Fisher
 
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
DroidConTLV
 
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
OUM SAOKOSAL
 
Selenium 2 User Interactions API
Selenium 2 User Interactions APISelenium 2 User Interactions API
Selenium 2 User Interactions API
davehunt82
 
Yahoo presentation: JavaScript Events
Yahoo presentation: JavaScript EventsYahoo presentation: JavaScript Events
Yahoo presentation: JavaScript Events
Peter-Paul Koch
 
Sperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copySperimentazioni lezione6 from_designtoapplication copy
Sperimentazioni lezione6 from_designtoapplication copy
Salvatore Iaconesi
 
Day 5
Day 5Day 5
Yui mobile
Yui mobileYui mobile
Yui mobile
Gonzalo Cordero
 
Android Accessibility
Android AccessibilityAndroid Accessibility
Android Accessibility
Ascii Huang
 
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
admin220812
 

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

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...
Patrick Lauke
 
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
Patrick 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...
Patrick 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...
Patrick Lauke
 
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...
Patrick Lauke
 
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 ...
Patrick Lauke
 
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...
Patrick Lauke
 
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...
Patrick Lauke
 
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...
Patrick Lauke
 
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 / ...
Patrick Lauke
 
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...
Patrick Lauke
 
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...
Patrick Lauke
 
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 /...
Patrick Lauke
 
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...
Patrick Lauke
 
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...
Patrick Lauke
 
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
Patrick Lauke
 
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...
Patrick Lauke
 
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...
Patrick Lauke
 
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...
Patrick Lauke
 
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
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

LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
DanBrown980551
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 

Recently uploaded (20)

LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 

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? */