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
390
Front-end Performance
kornel
5
480
Other Decks in Technology
See All in Technology
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.7k
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
720
alecthomas/kong はいいぞ
fujiwara3
6
1.4k
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
1.9k
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
360
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
AWS DDoS攻撃防御の最前線
ryutakondo
0
110
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
220
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
190
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Producing Creativity
orderedlist
PRO
346
40k
Adopting Sorbet at Scale
ufuk
77
9.5k
Embracing the Ebb and Flow
colly
86
4.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Thoughts on Productivity
jonyablonski
69
4.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Statistics for Hackers
jakevdp
799
220k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.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