Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mobblestouch — W3C Touch Events and gestures
Search
Kornel Lesiński
October 25, 2011
Technology
2
720
Mobblestouch — W3C Touch Events and gestures
Presentation at Mr Mobbles Magical Emporium 10/2011
http://pornel.net/mobbles
Kornel Lesiński
October 25, 2011
Tweet
Share
More Decks by Kornel Lesiński
See All by Kornel Lesiński
SudWeb
kornel
0
190
Lossy PNG for true-color images (Velocity Conf EU 2014)
kornel
2
880
Modern PNG compressors
kornel
13
1.2k
Handling binary data in JS
kornel
1
390
Server-Sent Events
kornel
5
960
"HTML5" Transport Protocol
kornel
3
380
Front-end Performance
kornel
5
470
Other Decks in Technology
See All in Technology
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
360
アプリケーションの中身が見える!Mackerel APMの全貌と展望 / Mackerel APMリリースパーティ
mackerelio
0
450
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
300
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
daitak
0
130
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
0
440
Contract One Dev Group 紹介資料
sansan33
PRO
0
6k
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
650
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
110
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
240
kintone開発組織のDevOpsへの移り変わりと実践
ueokande
1
130
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
220
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
1
140
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Balancing Empowerment & Direction
lara
1
89
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Producing Creativity
orderedlist
PRO
346
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Speed Design
sergeychernyshev
30
970
The Language of Interfaces
destraynor
158
25k
Unsuck your backbone
ammeep
671
58k
How to train your dragon (web standard)
notwaldorf
92
6k
Transcript
Mobblestouch
www.w3.org/TR/touch-events
Microsoft http://blogs.msdn.com/b/ie/archive/2011/10/19/ handling-multi-touch-and-mouse-input-in-all-browsers.aspx
mousedown = mousemove = mouseup = touchstart touchmove touchend
mouseover mouseout :hover
click
element.ontouchstart = function(event){…} element.addEventListener (‘touchstart’,…,…)
TouchEvent interface event.touches = […] event.chagedTouches = […]
TouchEvent interface event.pageX → event.touches[i].pageX event.target → event.touches[i].target event.targetTouches
Touch interface touch.pageY/touch.pageX touch.target touch.identifier
Div 1 Div 2 Div 3 mousedown mousemove mouseup
Div 1 Div 2 Div 3 touchstart touchmove touchend
Tap and… ontouchstart = function() { timer = setTimeout(hold, 1000)
} ontouchend = function() { clearTimeout(timer) if (!held) tap() } var timer; …hold!
Hold on! ontouchstart = function(e) { if (e.touches.length > 1)
return; clearTimeout(timer) timer = setTimeout(hold, 1000) e.preventDefault() }
call event.preventDefault()
body.ontouchmove = function(e) {e.preventDefault()}
:active trick body.ontouchmove = function(){}
gesturestart gestureend
1 2 Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) )
Zoom moves!
Math.atan2( (x-x),(y-y) )
Math.TAU = 2*Math.PI Math.atan2(…)/Math.TAU*360+180
Beware of CSS transforms order!
Swipe Slow = peek Fast = switch
Swipe event.timestamp
Device ✌ ✌ 2.x ” 3.x ✌ ? Emulator ✌
” ” None
Alt Alt + Shift
Phantom limb vodori.com/blog/phantom-limb.html
@media all and (-moz-touch-enabled:1) {…} if (ontouchstart in window) {…}
document.body.ontouchstart = function() { touch_enabled = true; } Detection
Trackpad ≠ Multitouch MozSwipeGesture XUL only MozMousePixelScroll onscroll event.wheelDeltaX/Y
@pornelski Image credits: Flickr—Vectorportal http://www.flickr.com/photos/ vectorportal, Flickr—Peter Kaminski http://flickr.com/people/peterkaminski, Denis-Carl
http://www.deniscarl.com, Failblog.com and Dailysquee.com. Presented at: Mr Mobbles Magical Emporium 10/2011