Hell is other browsers - Sartre


    The touch events

        Peter-Paul Koch (ppk)
      http://quirksmode.org
      ht...
The desktop web
Boring!

-   Only five browsers
-   with only one viewport each
-   that support nearly everything
-   Eve...
The Mobile Web
Exciting!

- Fifteen browsers and counting
- ranging from great to lousy
- Interesting new bugs
- About fiv...
The Mobile Web
Exciting!

- Fifteen browsers and counting
- ranging from great to lousy
- Interesting new bugs
- About fiv...
Mobile browsers
-   Android WebKit      -   NetFront
-   Opera Mobile        -   Bolt
-   Dolfin (bada)       -   UCWeb
- ...
Mobile browsers
-   Android WebKit        -   NetFront
-   Opera Mobile          -   Bolt
-   Dolfin (bada)         -   UC...
WebKit Mobile
There is no WebKit on Mobile.
There's iPhone Safari (3 and 4),
and Android (1.6 and 2.1 and 2.2)
and Symbian...
There is no WebKit on Mobile.
http://quirksmode.org/webkit.html
Mobile web dev
Focus on (in roughly this order)
- iPhone
- Android
- BlackBerry (WebKit and old)
- Symbian WebKit
- Opera ...
Mobile web dev
Focus on (in roughly this order)
- iPhone
- Android
- BlackBerry (WebKit and old)
- Symbian WebKit
- Opera ...
Opera Mobile and Mini
Opera Mobile is a normal browser.
Request HTML, CSS, and JavaScript,
interpret and execute them.

Op...
Opera Mini
Opera Mini advantages:
- Little memory necessary, works on old
  phones, too.
- Less network traffic: you recei...
Opera Mini
Opera Mini disadvantage:
- No client-side interactivity. If a click
  event fires, Opera Mini goes back to
  th...
Mobile web dev
Focus on (in roughly this order)
- iPhone
- Android
- BlackBerry (WebKit and old)
- Symbian WebKit
- Opera ...
Mobile web dev
Get real devices to test on.
- iPhone or Android
- Nokia S60
- BlackBerry (older)
- Windows Mobile (useful ...
Mobile web dev
Get real devices to test on.

- Unlocked! You should test with
  multiple networks
- or with wifi
Mobile web dev
Use testing services:

http://www.deviceanywhere.com/
http://perfectomobile.com/

Or use an emulator. Most ...
The Mobile Web
Exciting!

- Fifteen browsers and counting
- ranging from great to lousy
- Interesting new bugs
- About fiv...
Before we start
please open the following link on your
phone:

http://quirksmode.org/touchevents

It gives links to the te...
Mouse
Mouse




Keyboard
Mouse




Keyboard




Touch
Keyboard users need different Mouse
interaction than mouse users
need different interactions than touch
users.

Your scrip...
keydown
keypress
keyup
mouseover
mouseout
mousedown
mouseup
mousemove
touchstart
touchmove
touchend
touchcancel
It's not an either-or proposition.
It's not an either-or proposition.

                         The Nokia E71
                         has a four-way
       ...
It's not an either-or proposition.

                         But...
                         the “arrow keys”
            ...
Today we'll concentrate on the touch
events, though.
http://quirksmode.org/touchevents

Open the first dropdown example.

Task: Click on option 3.2

This is with traditional m...
In theory a touchscreen device should
fire only the touch events, and not the
mouse events.

A touchscreen device doesn't ...
Touch !== mouse
-   Area
-   Pressure
-   Temperature
-   more than one touch
http://quirksmode.org/touchevents

Now open the second dropdown
example.

Task: Click on option 3.2

Doesn't work.
Not an entirely fair comparison.

Touchstart and touchend are not the
equivalents of mouseover and
mouseout.

In fact, tru...
Interaction modes
Mouse       Keyboard Touch
mousedown   keydown    touchstart
mousemove   keypress   touchmove
mouseup   ...
Interaction modes
Mouse         Keyboard Touch
mousedown     keydown        touchstart
mousemove     keypress       touchm...
Interaction modes
Mouse         Keyboard Touch
mousedown     keydown        touchstart
mousemove     keypress       touchm...
Interaction modes
Mouse         Keyboard Touch
mousedown     keydown        touchstart
mousemove     keypress       touchm...
Interaction modes
Mouse         Keyboard Touch
mousedown     keydown        touchstart
mousemove     keypress       touchm...
When you touch the screen of a
touchscreen, both touch and mouse
events fire.

But the mouse events are a bit special.
The...
touchstart
mouseover
mousemove (only one!)
mousedown
mouseup
click
:hover styles applied
Once started, the touch events keep
firing regardless of where your finger is.

element.ontouchmove = function () {
  // d...
touchstart      If a DOM change occurs
mouseover       onmouseover or
mousemove       onmousemove, the rest
mousedown     ...
When the user touches another element
mouseout
:hover styles removed
http://quirksmode.org/touchevents

Try the Event Delegation page. Touch
the bordered div.

document.onclick = function () ...
The iPhone does not register a click
event if the element you click on doesn't
have a click event handler.

document.oncli...
http://quirksmode.org/touchevents

Now open the first drag-and-drop
example.

Should work fine; both on touch devices
and ...
Mouse and touch events:

element.ontouchstart = function (e) {
  element.ontouchmove = function (e) {etc}
  element.ontouc...
Mouse and touch events:

element.ontouchstart = function (e) {
  element.ontouchmove = function (e) {etc}
  element.ontouc...
http://quirksmode.org/touchevents

Now open the second drag-and-drop
example.

iPhone only.
Try dragging two or all three ...
This is impossible on a desktop
computer. Two mice?

Useful for games, maybe (especially on
the iPad).

Does not work on o...
http://quirksmode.org/touchevents

Now open the scrolling layer example.

Works fine – on mobile.
But how do we port this ...
Interaction modes

-   mouse
-   keyboard
-   touch
-   and a fourth....
Interaction modes

-   mouse
-   keyboard
-   touch
-   trackball

Generally fires a
mousemove event
Thank you!
       Questions?
http://quirksmode.org
http://twitter.com/ppk

I'll post these slides on my site.
The touch events - WebExpo
Upcoming SlideShare
Loading in …5
×

The touch events - WebExpo

6,270 views

Published on

Published in: Technology

The touch events - WebExpo

  1. 1. Hell is other browsers - Sartre The touch events Peter-Paul Koch (ppk) http://quirksmode.org http://twitter.com/ppk WebExpo, 24 September 2010
  2. 2. The desktop web Boring! - Only five browsers - with only one viewport each - that support nearly everything - Even IE? Yes, even IE.
  3. 3. The Mobile Web Exciting! - Fifteen browsers and counting - ranging from great to lousy - Interesting new bugs - About five times as many users as the desktop web (eventually) - New interaction modes
  4. 4. The Mobile Web Exciting! - Fifteen browsers and counting - ranging from great to lousy - Interesting new bugs - About five times as many users as the desktop web (eventually) - New interaction modes
  5. 5. Mobile browsers - Android WebKit - NetFront - Opera Mobile - Bolt - Dolfin (bada) - UCWeb - Safari - Obigo - MicroB - Fennec - BlackBerry WebKit - Opera Mini - Symbian WebKit - IE Mobile - Palm WebKit You may groan now.
  6. 6. Mobile browsers - Android WebKit - NetFront - Opera Mobile - Bolt - Dolfin (bada) - UCWeb - Safari - Obigo - MicroB - Fennec - BlackBerry WebKit - Opera Mini - Symbian WebKit - IE Mobile - Palm WebKit These are all WebKit-based.
  7. 7. WebKit Mobile There is no WebKit on Mobile. There's iPhone Safari (3 and 4), and Android (1.6 and 2.1 and 2.2) and Symbian WebKit (1 and 2) and Blackberry WebKit and Palm WebKit and Dolfin for bada These WebKits are all different.
  8. 8. There is no WebKit on Mobile. http://quirksmode.org/webkit.html
  9. 9. Mobile web dev Focus on (in roughly this order) - iPhone - Android - BlackBerry (WebKit and old) - Symbian WebKit - Opera Mini - Opera Mobile - Dolfin (bada)
  10. 10. Mobile web dev Focus on (in roughly this order) - iPhone - Android - BlackBerry (WebKit and old) - Symbian WebKit - Opera Mini - Opera Mobile - Dolfin (bada)
  11. 11. Opera Mobile and Mini Opera Mobile is a normal browser. Request HTML, CSS, and JavaScript, interpret and execute them. Opera Mini, though, sends your request to a special server, which requests the HTML, CSS, and JS then interprets it and sends back basically a bitmap
  12. 12. Opera Mini Opera Mini advantages: - Little memory necessary, works on old phones, too. - Less network traffic: you receive a highly compressed bitmap
  13. 13. Opera Mini Opera Mini disadvantage: - No client-side interactivity. If a click event fires, Opera Mini goes back to the server to ask for instructions Tradeoff: lose client-side interactivity, but spend less money on devices and network connections.
  14. 14. Mobile web dev Focus on (in roughly this order) - iPhone - Android - BlackBerry (WebKit and old) - Symbian WebKit - Opera Mini - Opera Mobile - Dolfin (bada)
  15. 15. Mobile web dev Get real devices to test on. - iPhone or Android - Nokia S60 - BlackBerry (older) - Windows Mobile (useful secondary test platform) Yes, that's expensive. It's also necessary.
  16. 16. Mobile web dev Get real devices to test on. - Unlocked! You should test with multiple networks - or with wifi
  17. 17. Mobile web dev Use testing services: http://www.deviceanywhere.com/ http://perfectomobile.com/ Or use an emulator. Most mobile phone vendors offer one. Drawback: you can't hold them in your hand, and that's crucial for mobile.
  18. 18. The Mobile Web Exciting! - Fifteen browsers and counting - ranging from great to lousy - Interesting new bugs - About five times as many users as the desktop web (eventually) - New interaction modes
  19. 19. Before we start please open the following link on your phone: http://quirksmode.org/touchevents It gives links to the test files. The touch tests only work on iPhone, Android, bada, and BlackBerry Torch.
  20. 20. Mouse
  21. 21. Mouse Keyboard
  22. 22. Mouse Keyboard Touch
  23. 23. Keyboard users need different Mouse interaction than mouse users need different interactions than touch users. Your script accomodates all three modes, right? It's all a question of events.
  24. 24. keydown keypress keyup
  25. 25. mouseover mouseout mousedown mouseup mousemove
  26. 26. touchstart touchmove touchend touchcancel
  27. 27. It's not an either-or proposition.
  28. 28. It's not an either-or proposition. The Nokia E71 has a four-way navigation. Works like the arrow keys (including keycodes). But...
  29. 29. It's not an either-or proposition. But... the “arrow keys” steer a mouse cursor. Key events and mouse events
  30. 30. Today we'll concentrate on the touch events, though.
  31. 31. http://quirksmode.org/touchevents Open the first dropdown example. Task: Click on option 3.2 This is with traditional mouseover and mouseout; no touch-specific code. Works (a bit oddly, but works).
  32. 32. In theory a touchscreen device should fire only the touch events, and not the mouse events. A touchscreen device doesn't have a mouse, after all. However, too many websites depend on the mouse events, so touch browser vendors are forced to support them, too.
  33. 33. Touch !== mouse - Area - Pressure - Temperature - more than one touch
  34. 34. http://quirksmode.org/touchevents Now open the second dropdown example. Task: Click on option 3.2 Doesn't work.
  35. 35. Not an entirely fair comparison. Touchstart and touchend are not the equivalents of mouseover and mouseout. In fact, true hovering is impossible on touchscreens. There is no way of saying “I might be interested in this element but I'm not sure yet.”
  36. 36. Interaction modes Mouse Keyboard Touch mousedown keydown touchstart mousemove keypress touchmove mouseup keyup touchend mouseover focus - mouseout blur - All All iPhone, Android, bada, BlackBerry
  37. 37. Interaction modes Mouse Keyboard Touch mousedown keydown touchstart mousemove keypress touchmove mouseup keyup touchend mouseover focus - mouseout blur - load, unload, click, submit, resize, zoom, change etc. etc.
  38. 38. Interaction modes Mouse Keyboard Touch mousedown keydown touchstart mousemove keypress touchmove mouseup keyup touchend mouseover focus - mouseout blur - load, unload, click, submit, resize, zoom, change etc. etc.
  39. 39. Interaction modes Mouse Keyboard Touch mousedown keydown touchstart mousemove keypress touchmove mouseup keyup touchend mouseover focus - mouseout blur - load, unload, click, submit, resize, zoom, change etc. etc.
  40. 40. Interaction modes Mouse Keyboard Touch mousedown keydown touchstart mousemove keypress touchmove mouseup keyup touchend mouseover focus - mouseout blur - load, unload, click, submit, resize, zoom, change etc. etc.
  41. 41. When you touch the screen of a touchscreen, both touch and mouse events fire. But the mouse events are a bit special. They all fire at the same time. http://quirksmode.org/touchevents You can test the events for yourself at the touch action test page.
  42. 42. touchstart mouseover mousemove (only one!) mousedown mouseup click :hover styles applied
  43. 43. Once started, the touch events keep firing regardless of where your finger is. element.ontouchmove = function () { // do stuff } This event handler continues firing even if your finger leaves the element. We need touchenter and touchleave events for when finger enters or leaves element.
  44. 44. touchstart If a DOM change occurs mouseover onmouseover or mousemove onmousemove, the rest mousedown of the events is cancelled. mouseup (iPhone and Symbian) click :hover styles applied
  45. 45. When the user touches another element mouseout :hover styles removed
  46. 46. http://quirksmode.org/touchevents Try the Event Delegation page. Touch the bordered div. document.onclick = function () { // change divs } You click on a div, not on the document. Still, the event bubbles up. Except on the iPhone.
  47. 47. The iPhone does not register a click event if the element you click on doesn't have a click event handler. document.onclick = function () { // change divs } div.onclick = function () {} Now the div itself has a click event handler, and event delegation works fine.
  48. 48. http://quirksmode.org/touchevents Now open the first drag-and-drop example. Should work fine; both on touch devices and with a mouse. This is very simple.
  49. 49. Mouse and touch events: element.ontouchstart = function (e) { element.ontouchmove = function (e) {etc} element.ontouchend = function (e) {etc} } element.onmousedown = function (e) { document.onmousemove = function (e) {etc} document.onmouseup = function (e) {etc} }
  50. 50. Mouse and touch events: element.ontouchstart = function (e) { element.ontouchmove = function (e) {etc} element.ontouchend = function (e) {etc} element.onmousedown = null; } element.onmousedown = function (e) { document.onmousemove = function (e) {etc} document.onmouseup = function (e) {etc} } But how do you know whether to use the mouse or the touch events?
  51. 51. http://quirksmode.org/touchevents Now open the second drag-and-drop example. iPhone only. Try dragging two or all three layers simultaneously. (A bit stilted, but you get the point.)
  52. 52. This is impossible on a desktop computer. Two mice? Useful for games, maybe (especially on the iPad). Does not work on other browsers: they don't (yet) support true multitouch.
  53. 53. http://quirksmode.org/touchevents Now open the scrolling layer example. Works fine – on mobile. But how do we port this to the other interaction modes? - keys: use arrow keys - mouse: ???
  54. 54. Interaction modes - mouse - keyboard - touch - and a fourth....
  55. 55. Interaction modes - mouse - keyboard - touch - trackball Generally fires a mousemove event
  56. 56. Thank you! Questions? http://quirksmode.org http://twitter.com/ppk I'll post these slides on my site.

×