Download - The touch events
![Page 1: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/1.jpg)
The touch eventsPeter-Paul Koch
http://quirksmode.org http://twitter.com/ppk
<!DOCTYPE html>, 13 April 2011
1
![Page 2: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/2.jpg)
Before we start
• please open the following link on your phone
• http://quirksmode.org/touchevents
• It gives links to test files I’ll refer to in my presentation.
• The touch tests work on iPhone, Android, bada, BlackBerry Torch, and Opera Mobile 10.1+
2
![Page 3: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/3.jpg)
In the beginning was the mouse
3
![Page 4: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/4.jpg)
In the beginning was the mouse
Then we figured outwe had to do something about the keyboard, too.
4
![Page 5: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/5.jpg)
TextAnd now we also have touch
5
![Page 6: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/6.jpg)
Interaction modes
• They sometimes need different approaches
• but at other times a similar approach
• It’s all a matter of events
6
![Page 7: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/7.jpg)
keydownkeypresskeyup
7
![Page 8: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/8.jpg)
mouseovermouseoutmousedownmouseupmousemovemouseentermouseleave
8
![Page 9: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/9.jpg)
touchstarttouchmovetouchendtouchcancel
9
![Page 10: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/10.jpg)
Interaction modes
• On desktop it’s simple
• Someone uses either the keyboard, or the mouse
• The two interaction modes can largely ignore each other
• (though they may use the same functions)
• On mobile it’s not so simple
10
![Page 11: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/11.jpg)
Interaction modes
• Nokia E71
• No touchscreen
11
![Page 12: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/12.jpg)
Interaction modes
• Nokia E71
• No touchscreen
• 4-way navigation (keys)
12
![Page 13: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/13.jpg)
Interaction modes
• Nokia E71
• No touchscreen
• 4-way navigation (keys)
• but the keys steer a mouse cursor
• Key events and mouse events at the same time
13
![Page 14: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/14.jpg)
Besides, touchscreen phones must support the mouse events, too.
There are too many websites that depend on mouse events.
14
![Page 15: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/15.jpg)
Example 1
• http://quirksmode.org/touchevents
• Open the first dropdown example
• Task: Click on option 3.2
• Works. A bit oddly, but works.
• This script uses mouseover and mouseout; no touch events.
15
![Page 16: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/16.jpg)
Example 2
• http://quirksmode.org/touchevents
• Now open the second dropdown example
• Task: Click on option 3.2
• Does not work.
• This is with the touch events swapped in for the mouse events.
16
![Page 17: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/17.jpg)
Comparison
• Not a fair comparison.
• Touchstart and touchend are not the equivalents of mouseover and mouseout.
• Mouseover and mouseout are about hover state
• and hover state does not exist on touchscreens.
17
![Page 18: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/18.jpg)
Hover
• Hover states cannot function on touchscreens.
• There is no way of saying “I may be interested in this element, but I’m not sure yet.”
• This will change the ways we interact with websites
• change for the good
18
![Page 19: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/19.jpg)
Interaction modesMouse
mousedownmousemovemouseupmouseovermouseout
Keyboard
keydownkeypresskeyupfocusblur
Touch
touchstarttouchmovetouchend--
load, unload, click, submit, resize, zoom, change etc. etc.
19
![Page 20: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/20.jpg)
Interaction modesMouse
mousedownmousemovemouseupmouseovermouseout
Keyboard
keydownkeypresskeyupfocusblur
Touch
touchstarttouchmovetouchend--
load, unload, click, submit, resize, zoom, change etc. etc.
20
![Page 21: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/21.jpg)
Interaction modesMouse
mousedownmousemovemouseupmouseovermouseout
Keyboard
keydownkeypresskeyupfocusblur
Touch
touchstarttouchmovetouchend--
load, unload, click, submit, resize, zoom, change etc. etc.
21
![Page 22: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/22.jpg)
Interaction modesMouse
mousedownmousemovemouseupmouseovermouseout
Keyboard
keydownkeypresskeyupfocusblur
Touch
touchstarttouchmovetouchend--
load, unload, click, submit, resize, zoom, change etc. etc.
22
![Page 23: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/23.jpg)
Stick with click
• Really means “activate”
• Works everywhere, on every phone
• But: slow23
![Page 24: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/24.jpg)
The slowness of click
• “I want to single-tap”
• “I want to scroll this”
• “I want to pinch-zoom”
• “I want to double-tap”
If you touch an element, it may mean several things
Thus a click (or rather, a single tap) is a bit slow: it needs to wait until the OS is certain you don’t want to do anything else.
24
![Page 25: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/25.jpg)
The touch event spec
• Touchstart, touchmove, touchend
• touches, changedTouches, target Touches
• Touchenter, touchleave
• Area
• Force
25
![Page 26: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/26.jpg)
Touch and mouse• If you touch an element the touch events
fire,
• but the mouse events fire, too.
• Just not quite like you’re used to
26
![Page 27: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/27.jpg)
Touch and mouse
• touchstart
• mouseover
• mousemove (only one!)
• mousedown
• mouseup
• click
• :hover styles are applied
If you touch an element, the following events all fire, in this order:
27
![Page 28: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/28.jpg)
Touch and mouseThat’s not as big a problem as you’d think.
Generally you use either the touch events or just one mouse event.
Only problem: mousemove. But it won’t work on touchscreens in any case.
28
![Page 29: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/29.jpg)
Touchmove• Touchmove fires when the touch moves
(<duh />)
• But...
• it continues firing even if the finger leaves the element the event is handled on.
• element.ontouchmove = doSomething;
• doSomething is still called after the finger leaves the element
• What we’d really need is touchenter and touchleave. They’re in the spec, but not yet supported.
29
![Page 30: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/30.jpg)
Touch and mouse• touchstart
• mouseover
• mousemove (only one!)
• mousedown
• mouseup
• click
• :hover styles are applied
30
![Page 31: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/31.jpg)
Touch and mouse• touchstart
• mouseover
• mousemove (only one!)
On iPhone and Symbian,if a DOM change occurs onmouseover or onmousemove,all other events are cancelled.This probably makes sensesomehow...
31
![Page 32: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/32.jpg)
Touch and mouse
• the mouseout event fires on the original element
• the :hover styles are removed from the original element
• Now you understand why the first dropdown menu works as it works.
If you touch another element,
32
![Page 33: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/33.jpg)
Example 3
• http://quirksmode.org/touchevents
• See for yourself at the touch action test page.
• (This is the page I used to determine all these facts.)
33
![Page 34: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/34.jpg)
Example 4
• http://quirksmode.org/touchevents
• Now try the Event Delegation page.
• I created it to study the weirdest bug ever. On the iPhone.
34
![Page 35: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/35.jpg)
iPhone bug
• If you touch the bordered div a click event fires (eventually)
• It’s supposed to bubble up to the document, where it is caught
• document.onclick = changeBorder;
• However, on the iPhone the bubbling stops just below the <body>.
• For the life of me I can’t figure out why (though it’s likely deliberate)
35
![Page 36: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/36.jpg)
iPhone bug
• Workaround:
• make sure that the div is clickable:• div.onclick = function (){}
• An empty event handler is enough.
• Or ...
• div {cursor: pointer}
• Don’t ask me why Apple thought this was a good idea.
36
![Page 37: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/37.jpg)
Example 5
• http://quirksmode.org/touchevents
• The first drag-and-drop example
• Works fine with mouse or touch.
• mousedown-mousemove-mouseup
• touchstart-touchmove-touchend
• Completely equivalent
37
![Page 38: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/38.jpg)
So mousedown and mouseup are the true equivalents of touchstart and touchend.
Still, that doesn’t mean they’re the same.
38
![Page 39: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/39.jpg)
Touch !== mouse• Area
• Pressure
• Temperature
• Multitouch
39
![Page 40: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/40.jpg)
Drag and dropelement.onmousedown = function (e) {! // initialise! document.onmousemove = function (e) {! ! // move! }! document.onmouseup = function (e) {! ! document.onmousemove = null;! ! document.onmouseup = null;! }}
40
![Page 41: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/41.jpg)
Drag and dropelement.onmousedown = function (e) {! // initialise! document.onmousemove = function (e) {! ! // move! }! document.onmouseup = function (e) {! ! document.onmousemove = null;! ! document.onmouseup = null;! }}
41
![Page 42: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/42.jpg)
Drag and dropelement.onmousedown = function (e) {! // initialise! document.onmousemove = function (e) {! ! // move! }! document.onmouseup = function (e) {! ! document.onmousemove = null;! ! document.onmouseup = null;! }}
42
![Page 43: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/43.jpg)
Drag and dropelement.onmousedown = function (e) {! // initialise! document.onmousemove = function (e) {! ! // move! }! document.onmouseup = function (e) {! ! document.onmousemove = null;! ! document.onmouseup = null;! }}
43
![Page 44: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/44.jpg)
Drag and dropelement.ontouchstart = function (e) {! // initialise! document.ontouchmove = function (e) {! ! // move! }! document.ontouchend = function (e) {! ! document.ontouchmove = null;! ! document.ontouchend = null;! }}
44
![Page 45: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/45.jpg)
Drag and dropelement.ontouchstart = function (e) {! // initialise! element.ontouchmove = function (e) {! ! // move! }! element.ontouchend = function (e) {! ! element.ontouchmove = null;! ! element.ontouchend = null;! }}
45
![Page 46: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/46.jpg)
Drag and drop// for mouseelement.onmousedown = function (e) {
// yaddah}
// for touchelement.ontouchstart = function (e) {
// yaddah
}
46
![Page 47: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/47.jpg)
Drag and drop// for mouseelement.onmousedown = function (e) {
// yaddah}
// for touchelement.ontouchstart = function (e) {
// yaddahelement.onmousedown = null;
}
47
![Page 48: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/48.jpg)
Example 6
• http://quirksmode.org/touchevents
• The second drag-and-drop example
• Multitouch, baby!
• Works only on iPhone and (a bit stilted) Opera Mobile 10.1+
• Completely impossible with mouse
• Would be fun for games, especially on a tablet
48
![Page 49: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/49.jpg)
• http://quirksmode.org/touchevents
• The scrolling layer example
• Works fine in all browsers that support the touch events
• But: how are we going to port this to other interaction models?
• Keyboard: arrow keys
• But what about the mouse?
Example 7
49
![Page 50: The touch events](https://reader034.vdocuments.us/reader034/viewer/2022052618/554e255bb4c9056b798b5023/html5/thumbnails/50.jpg)
Thank you!Questions?
http://quirksmode.orghttp://twitter.com/ppk
I'll post these slides on my site.
50