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
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
490
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
950
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
170
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
470
[FOSS4G 2019 Niigata] AIによる効率的危険斜面抽出システムの開発について
nssv
0
310
Lambdaと地方とコミュニティ
miu_crescent
2
370
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
Featured
See All Featured
Unsuck your backbone
ammeep
668
57k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Six Lessons from altMBA
skipperchong
27
3.5k
Optimizing for Happiness
mojombo
376
70k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Music & Morning Musume
bryan
46
6.2k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
RailsConf 2023
tenderlove
29
900
Thoughts on Productivity
jonyablonski
67
4.3k
Building an army of robots
kneath
302
43k
YesSQL, Process and Tooling at Scale
rocio
169
14k
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