Share
Embed
Slide 1
Slide 1 text
Mobblestouch
Slide 2
Slide 2 text
www.w3.org/TR/touch-events
Slide 3
Slide 3 text
Microsoft
http://blogs.msdn.com/b/ie/archive/2011/10/19/
handling-multi-touch-and-mouse-input-in-all-browsers.aspx
Slide 4
Slide 4 text
mousedown =
mousemove =
mouseup =
touchstart
touchmove
touchend
Slide 5
Slide 5 text
mouseover
mouseout
:hover
Slide 6
Slide 6 text
click
Slide 7
Slide 7 text
element.ontouchstart =
function(event){…}
element.addEventListener
(‘touchstart’,…,…)
Slide 8
Slide 8 text
TouchEvent interface
event.touches = […]
event.chagedTouches = […]
Slide 9
Slide 9 text
TouchEvent interface
event.pageX → event.touches[i].pageX
event.target → event.touches[i].target
event.targetTouches
Slide 10
Slide 10 text
Touch interface
touch.pageY/touch.pageX
touch.target
touch.identifier
Slide 11
Slide 11 text
Div 1 Div 2 Div 3
mousedown mousemove mouseup
Slide 12
Slide 12 text
Div 1 Div 2 Div 3
touchstart
touchmove
touchend
Slide 13
Slide 13 text
Tap and…
ontouchstart = function() {
timer = setTimeout(hold, 1000)
}
ontouchend = function() {
clearTimeout(timer)
if (!held) tap()
}
var timer;
…hold!
Slide 14
Slide 14 text
Hold on!
ontouchstart = function(e) {
if (e.touches.length > 1) return;
clearTimeout(timer)
timer = setTimeout(hold, 1000)
e.preventDefault()
}
Slide 15
Slide 15 text
call
event.preventDefault()
Slide 16
Slide 16 text
body.ontouchmove =
function(e) {e.preventDefault()}
Slide 17
Slide 17 text
:active trick
body.ontouchmove = function(){}
Slide 18
Slide 18 text
gesturestart
gestureend
Slide 19
Slide 19 text
1
2
Math.sqrt(
(x1-x2)*(x1-x2)
+
(y1-y2)*(y1-y2)
)
Slide 20
Slide 20 text
Zoom moves!
Slide 21
Slide 21 text
Math.atan2(
(x-x),(y-y)
)
Slide 22
Slide 22 text
Math.TAU = 2*Math.PI
Math.atan2(…)/Math.TAU*360+180
Slide 23
Slide 23 text
Beware of CSS transforms order!
Slide 24
Slide 24 text
Swipe
Slow = peek
Fast = switch
Slide 25
Slide 25 text
Swipe
event.timestamp
Slide 26
Slide 26 text
Device ✌ ✌ 2.x
”
3.x
✌ ?
Emulator ✌ ” ” None
Slide 27
Slide 27 text
Alt
Alt
+
Shift
Slide 28
Slide 28 text
Phantom limb
vodori.com/blog/phantom-limb.html
Slide 29
Slide 29 text
@media all and (-moz-touch-enabled:1) {…}
if (ontouchstart in window) {…}
document.body.ontouchstart = function() {
touch_enabled = true;
}
Detection
Slide 30
Slide 30 text
Trackpad ≠ Multitouch
MozSwipeGesture XUL only
MozMousePixelScroll
onscroll event.wheelDeltaX/Y
Slide 31
Slide 31 text
@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