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
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.4k
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
830
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
560
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Scaling GitHub
holman
458
140k
KATA
mclloyd
29
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
How to train your dragon (web standard)
notwaldorf
88
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Writing Fast Ruby
sferik
626
61k
Raft: Consensus for Rubyists
vanstee
136
6.6k
A Philosophy of Restraint
colly
203
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Making Projects Easy
brettharned
115
5.9k
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