Beyond smartphones and tablets, touchscreens are finding their way into laptops and even desktop computers. With hardware support for touch becoming increasingly ubiquitous, it's time to explore what new possibilities are available to developers. This session will cover the basics of handling touch events - from making sure simple single-tap interactions are as responsive as possible, all the way to examples of full multitouch, gesture-enabled elements.
2. about me...
• senior accessibility consultant at The Paciello Group
• previously developer relations at Opera
• member of W3C Touch Events Community Group
• chair (since March 2016) of W3C Pointer Events Working Group
32. • too many touchmove events prevent mouse compatibility events
after touchend (not considered a "clean" tap)
• too many touchmove events on activatable elements can lead to
touchcancel (in old Chrome/Browser versions)
• not all browsers consistently send touchmove
• differences in focus / blur and some mouse compatibility events
(e.g. mouseenter / mouseleave )
• some events may only fire when tapping away to another focusable
element (e.g. blur )
some browsers outright weird...
51. /* feature detection for touch events */
if ( 'ontouchstart' in window ) {
/* some clever stuff here */
}
/* older browsers have flaky support so more
hacky tests needed...use Modernizr.touch or similar */
52. /* common performance “trick” */
var clickEvent =
( 'ontouchstart' in window ? 'touchend' : 'click' );
blah.addEventListener( clickEvent , function() { ... }, false);
53. /* common performance “trick” */
var clickEvent =
( 'ontouchstart' in window ? 'touchend' : 'click');
...
/* if touch events are supported,
only listen to touchend, not click */
77. Android 6.1/Firefox + TalkBack – similar to touch
touchstart > mousedown > focus > touchend > mouseup > click
78. further scenarios?
• desktop with external touchscreen
• desktop with external touchpad
• touchscreen laptop with non-touch second screen
• touchscreen laptop with trackpad/mouse
• ...and other permutations?
83. /* feature detection for touch events */
if ('ontouchstart' in window) {
/* browser supports touch events but user is
not necessarily using touch (exclusively) */
/* it could be a mobile, tablet, desktop, fridge ... */
}
86. /* doubled-up event listeners */
foo.addEventListener(' touchend ', someFunction, false);
foo.addEventListener(' click ', someFunction, false);
/* but this would fire our function twice for touch? */
patrickhlauke.github.io/touch/tests/event-listener_naive-event-doubling.html
87. /* doubled-up event listeners */
foo.addEventListener('touchend', function(e) {
/* prevent mouse events + click */
e.preventDefault();
/* then trigger the function */
someFunction(e);
}, false);
foo.addEventListener('click', someFunction, false);
patrickhlauke.github.io/touch/tests/event-listener_naive-event-doubling-fixed.html
88. /* doubled-up event listeners */
foo.addEventListener('touchend', someFunction, false);
foo.addEventListener('click', someFunction, false);
/* prevent mouse events + click as part of the common handler */
function someFunction(e) {
...
if (e.type == 'touchend') { e.preventDefault(); }
...
}
130. /* Naive uses of Interaction Media Features */
@media (hover: hover) {
/* primary input has hover...so we can rely on it? */
}
@media (pointer: fine) {
/* primary input has fine pointer precision...
so make all buttons/controls small? */
}
/* hover and pointer only check "primary" input, but
what if there's a secondary input that lacks capabilities? */
131. /* Better uses of Interaction Media Features */
@media (any-hover: none) {
/* at least one input lacks hover capability...
don't rely on it or avoid altogether */
}
@media (any-pointer: coarse) {
/* at least one input has coarse pointer precision...
provide larger buttons/controls for touch */
}
/* test for presence of *any* "least capable"
input (primary or not) */
151. changedTouches depending on event:
• for touchstart , all new touch points that became active
• for touchmove , all touch points that changed/moved since last event
• for touchend / touchcancel , touch points that were removed
(and are not active anymore at this point)
154. TouchList collections order
• order of individual Touch objects in a TouchList can change
• e.g. targetTouches[0] not guaranteed to always be the same finger
when dealing with multitouch
• not problematic for single-finger interactions, but use identifier
property for each Touch to explicitly track a particular touch point /
finger in multitouch
182. /* iOS/Safari/WebView has gesture events for size/rotation,
not part of the W3C Touch Events spec. */
gesturestart / gesturechange / gestureend
function(e) {
/* e.scale
e.rotation */
}
/* not supported in Chrome/Firefox/Opera */
185. /* with some trigonometry we can replicate
these from basic principles. */
var distance = Math.sqrt(Math.pow(...)+Math.pow(...));
var angle = Math.atan2(...);
214. mouse + click bubbling in iOS
• target element is a link or form control
• target or any ancestor (up to but not including body ) has explicit
mouse or click handler (even if only empty function)
• target or any ancestor (up to and including document ) has
cursor:pointer
Quirksmode: Mouse event bubbling in iOS
221. Rick Byers - Paint (with rotationAngle and touchRadius)
222. /* Touch Events – force */
partial interface Touch {
readonly attribute float radiusX;
readonly attribute float radiusY;
readonly attribute float rotationAngle;
readonly attribute float force ;
};
force : value in range 0 – 1 . if no hardware support 0
(some devices, e.g. Nexus 10, "fake" force based on radiusX / radiusY )
225. 3D Touch ≠ Force Touch
• Force Touch is Apple's proprietary extension to mouse events
• only aimed at force-enabled trackpads (new Apple models)
• new events: webkitmouseforcewillbegin , webkitmouseforcedown ,
webkitmouseforceup , webkitmouseforcechanged
• mouse events have additional webkitForce property
Safari Developer Library: Responding to Force Touch Events
236. ...and some new inputs (though currently mapped to mouse)
Building Xbox One Apps using HTML and JavaScript
YouTube: Xbox One Edge Browser sends Pointer Events
256. events fired on tap (IE10/IE11)
mousemove* >
pointerover > mouseover >
pointerenter > mouseenter >
pointerdown > mousedown >
gotpointercapture >
focus >
pointermove > mousemove >
pointerup > mouseup >
lostpointercapture >
pointerout > mouseout >
pointerleave > mouseleave >
click
mouse events fired “inline” with pointer events
(for a primary pointer, e.g. first finger on screen)
257. current IE10/11 quirk
...
pointerup > mouseup >
lostpointercapture >
pointerout > mouseout >
pointerleave > mouseleave >
click
the fact that click comes last is a current IE10/11 quirk – according
to spec it should come after pointerup > mouseup , and does already
when using touch-action
W3C Pointer Events WG mailing list - Jacob Rossi (Microsoft)
263. /* detecting pointer events support */
if ( window.PointerEvent ) {
/* some clever stuff here but this covers
touch, stylus, mouse, etc */
}
/* still listen to click for keyboard! */
265. /* detect maximum number of touch points */
if ( navigator.maxTouchPoints > 0 ) {
/* device with a touchscreen */
}
if ( navigator.maxTouchPoints > 1 ) {
/* multitouch-capable device */
}
274. “how can we make it feel
responsive like a native app?”
275. we could try a similar
approach to touch events...
276. • double-up pointerup and click listeners?
• prevent code firing twice with preventDefault ?
won't work: preventDefault() stops mouse compatibility events, but
click is not considered mouse compatibility event
279. CSS property
what action should the browser handle?
touch-action: auto | none | [ pan-x || pan-y ] | manipulation
www.w3.org/TR/pointerevents/#the-touch-action-css-property
only determines default touch action, does not stop compatibility
mouse events nor click
320. /* in IE11/Edge, pointerType returns a string
in IE10, the return type is long */
MSPOINTER_TYPE_TOUCH: 0x00000002
MSPOINTER_TYPE_PEN: 0x00000003
MSPOINTER_TYPE_MOUSE: 0x00000004
MSDN: IE Dev Center - API reference - pointerType property
322. /* PointerEvents don't have the handy TouchList objects,
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 ':
case ' pointercancel ':
/* remove the relevant array entry */
break;
}
325. simultaneous use of inputs is
hardware-dependent
(e.g. Surface 3 "palm blocking" prevents concurrent
touch/stylus/mouse, but not
touch/external mouse/external stylus)
327. /* like iOS/Safari, IE/Win has higher-level gestures ,
but these are not part of the W3C Pointer Events spec.
Replicate these from basic principles again... */
MSDN IE10 Developer Guide: Gesture object and events
339. • touch events have implicit capture: once you start a touch movement
on an element, events keep firing to the element even when moving
outside the element's boundaries
• pointer events behave like mouse events: only fire events to an
element while pointer (e.g. finger on touchscreen) inside element, but
you can explicitly capture pointers
340. /* events related to pointer capture */
gotpointercapture / lostpointercapture
/* example of how to capture a pointer explicitly */
element.addEventListener('pointerdown', function(e) {
this. setPointerCapture(e.pointerId) ;
}, false }
/* capture automatically released on pointerup / pointercancel
or explicitly with releasePointerCapture() */
patrickhlauke.github.io/touch/tests/pointercapture.html
345. 1. performance issues (hit-testing)
2. unified event model not "mobile first"
3. difficult to implement "pull to refresh"
4. we already have touch events
5. Apple won't implement them...
376. /* adding jQuery PEP */
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
/* need to use custom touch-action attribute, not CSS (yet) */
<button touch-action="none" >...</div>
387. ietouch peculiarities
• event object has no targetTouches TouchList
• touches acts as if it were targetTouches , so no touch points that
didn't start on the element we're listening to are reported
• changedTouches seems to always contain same touch points as the
touches TouchList
392. /* Hammer's high-level events example */
var element = document.getElementById('test_el');
var hammertime = new Hammer(element);
hammertime.on("swipe",
function(event) {
/* handle horizontal swipes */
});
406. Input Device Capabilities
• currently limited usefulness - only has firesTouchEvents property
• limited use cases (see Identifying touch events that will trigger a tap /
click, Identifying mouse events derived from touch events and Google
Developer: Input Device Capabilities)
• easier to switch to Pointer Events (and add PEP)?
407. myButton.addEventListener('touchstart', addHighlight, false);
myButton.addEventListener('touchend', removeHighlight, false);
myButton.addEventListener('mousedown', addHighlight, false);
myButton.addEventListener('mouseup', removeHighlight, false);
myButton.addEventListener('click', someFunction, false);
/* addHighlight/removeHighlight will fire twice for touch
(first for touch, then for mouse compatibility events);
can't use e.preventDefault(), as we want to rely on 'click' */
408. myButton.addEventListener('touchstart', addHighlight, false);
myButton.addEventListener('touchend', removeHighlight, false);
myButton.addEventListener('mousedown', function(e) {
if (!e.sourceCapabilities.firesTouchEvents) {
addHighlight(e);
} } , false);
myButton.addEventListener('mouseup', function(e) {
if (!e.sourceCapabilities.firesTouchEvents) {
removeHighlight(e);
} } , false);
myButton.addEventListener('click', someFunction, false);
/* same function for touch and mouse, but if mouse check if source
input fires touch events (i.e. this is a mouse compat event) */
412. • Matt Gaunt – Touch Feedback for Mobile Sites
• Jonathan Stark – FastActive
• Stephen Woods – HTML5 Touch Interfaces
• YouTube: Stephen Woods – Responsive HTML5 Touch Interfaces
• Chris Wilson + Paul Kinlan – Touch And Mouse: Together Again For
The First Time
• Ryan Fioravanti – Creating Fast Buttons for Mobile Web Applications
• Boris Smus – Multi-touch Web Development
• Boris Smus – Generalized input on the cross-device web
• Boris Smus – Interactive touch laptop experiments
413. • Rick Byers + Boris Smus (Google I/O) – Point, Click, Tap, Touch -
Building Multi-Device Web Interfaces
• Grant Goodale – Touch Events
• W3C – Touch Events Extensions
• Mozilla Developer Network – Touch Events
• WebPlatform.org – Pointer Events
• Rick Byers – The best way to avoid the dreaded 300ms click delay is
to disable double-tap zoom
• Chromium Issue 152149: All touch-event related APIs should exist if
touch support is enabled at runtime
414. • Tim Kadlec – Avoiding the 300ms Click Delay, Accessibly
• David Rousset - Unifying touch and mouse [...]
• Microsoft – Pointer events updates (differences between IE10-IE11)
• Patrick H. Lauke – Webseiten zum Anfassen
• Patrick H. Lauke – Drei unter einem Dach: Pointer-Events für Maus,
Stylus und Touchscreen
• Patrick H. Lauke – Erweiterte Interaktionsmöglichkeiten mit
Touchscreens
• Patrick H. Lauke – Make your site work on touch devices
• Stu Cox – You can't detect a touchscreen
415. • Microsoft – Hover touch support (IE10/IE11)
• W3C Media Queries Level 4 – pointer
• Stu Cox – The Good & Bad of Level 4 Media Queries
• Peter-Paul Koch – Touch table
• Peter-Paul Koch – Preventing the touch default
• Peter-Paul Koch – Mouse event bubbling in iOS
• YouTube: Edge Conference (Feb 2013 London) – Panel: Input
• Edge Conference (Mar 2014 London) – Panel: Pointers and Interactions
• Trent Walton – Device-Agnostic
416. • Stu Cox – The Golden Pattern for Handling Touch Input
• Matt Gaunt – ‘Focusing’ on the Web Today
• Mobiscroll – Working with touch events
• Peter-Paul Koch – The iOS event cascade and innerHTML
• Patrick H. Lauke – Make your site work on touch devices
• Scott Jehl (Filament Group) – Tappy: A custom tap event handler
• Yehuda Katz – Touch events on the web are fundamentally unfinished
417. • Andrea Giammarchi – PointerEvents No More
• YouTube: Matt Gaunt (Google) - Touch in a Web App? No Problem
• Luke Wroblewski – How to Communicate Hidden Gestures
• David Washington - Designing custom touch interactions
• David Washington - Building pull-to-refresh
• Andy Peatling - JavaScript Pull to Refresh for the Web
• Tilo Mitra – The State of Gestures
• YouTube: Tilo Mitra (YUI) – The State of Gestures
418. • Rob Larsen - The Uncertain Web: Pointer Event Polyfill and Chrome
Fragmentation
• Detlev Fisher - Implications of new input modes (touch, speech,
gestures) for the Web Content Accessibility Guidelines
• Ralph Thomas - Towards declarative touch interactions
• Windows Dev Center: Windows desktop applications > Guidelines >
Interaction (touch, keyboard, mouse, pen)
• Microsoft Open Technologies - jQuery Adopts Pointer Events
419. • jQuery blog - Getting on Point
• IEBlog - Pointer Events W3C Recommendation, Interoperable Touch,
and Removing the Dreaded 300ms Tap Delay
• Microsoft Open Technologies - Pointer Events is now a W3C Standard
• Patrick H. Lauke (The Paciello Group) - Pointer Events advance to W3C
Recommendation
• Jacob Rossi - The Input Shouldn't Matter
• hacks.mozilla.org - Pointer Events now in Firefox Nightly
420. • Rick Byers – Interoperability Case Studies at BlinkOn 5 (touch-action)
• Mozilla Developer Network – Pointer Events
• Christian Saylor – A Touch of Brilliance: Why 3D Touch Matters
• Lukas Mathis – Usability on Mobile Is Getting Worse
• Rocket Insights – Initial thoughts on 3D Touch
• Wiser Coder – Disable “pull to refresh” in Chrome for Android
421. • Google Developers / Web Fundamentals: Add touch to your site
• Alex Gibson – Different ways to trigger touchcancel in mobile
browsers
• BBC Global Experience Language: How to design for touch
• Google BlinkOn 5: Lightning talks / Mustaq Ahmed – Pointer Events
in Chrome implementation update
• A Book Apart: Josh Clark – Designing for Touch