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
730
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
200
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
970
"HTML5" Transport Protocol
kornel
3
390
Front-end Performance
kornel
5
480
Other Decks in Technology
See All in Technology
Introdução a Service Mesh usando o Istio
aeciopires
1
250
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
1k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
110
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
150
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
100
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
180
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
2k
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
380
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
230
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
2
700
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
ソースを読むプロセスの例
sat
PRO
15
9.5k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Cult of Friendly URLs
andyhume
79
6.6k
How STYLIGHT went responsive
nonsquared
100
5.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Gamification - CAS2011
davidbonilla
81
5.5k
Side Projects
sachag
455
43k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Code Review Best Practice
trishagee
72
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
KATA
mclloyd
PRO
32
15k
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