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
180
Lossy PNG for true-color images (Velocity Conf EU 2014)
kornel
2
870
Modern PNG compressors
kornel
13
1.2k
Handling binary data in JS
kornel
1
380
Server-Sent Events
kornel
5
950
"HTML5" Transport Protocol
kornel
3
370
Front-end Performance
kornel
5
460
Other Decks in Technology
See All in Technology
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
AGIについてChatGPTに聞いてみた
blueb
0
130
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
220
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
150
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
200
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
490
Taming you application's environments
salaboy
0
200
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
190
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Into the Great Unknown - MozCon
thekraken
32
1.5k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Designing Experiences People Love
moore
138
23k
Documentation Writing (for coders)
carmenintech
65
4.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Language of Interfaces
destraynor
154
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Bash Introduction
62gerente
608
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
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