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
Hammer.js
Search
ningzbruc
August 06, 2015
Programming
1
320
Hammer.js
Hammer.js
ningzbruc
August 06, 2015
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
40
去啊无线前端的一天
ningzbruc
1
150
React & Component
ningzbruc
0
29
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
250
KISSY.Base - all about that Base
ningzbruc
0
100
淘宝旅行门票iPad版开发
ningzbruc
0
120
Travel on KISSY mini
ningzbruc
0
170
Events
ningzbruc
2
120
Why YUI3
ningzbruc
0
180
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
テスト駆動Kaggle
isax1015
1
620
PipeCDのプラグイン化で目指すところ
warashi
1
300
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Code Reviewing Like a Champion
maltzj
524
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Invisible Side of Design
smashingmag
301
51k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Site-Speed That Sticks
csswizardry
10
700
Unsuck your backbone
ammeep
671
58k
Transcript
HAMMER.JS add touch gestures to your page.
Multi-Touch redefined User Interface
Gestures http://www.lukew.com/ff/entry.asp?1071
where we are
where we are and we need more gestures
Gestures But…what egg use?
Demo Time Back off! I’m going to ZhuangBi!!!
What can we do with gestures?
What can we do with gestures? ✓ Carousel ✓
Slider ✓ ImagePreview ✓ Drag&Drop&Sort ✓ ListView ✓ SideNavigation ✓ Games ✓ And More…
• touchstart/gesturestart • touchmove/gesturechange • touchend/gestureend •
touchcancel Touch & Gesture Event • e.touches • e.targetTouches • e.changedTouches • e.rotation/scale • e.pageX(Y)/clientX(Y)
• touchstart/gesturestart • touchmove/gesturechange • touchend/gestureend •
touchcancel Touch & Gesture Event • e.touches • e.targetTouches • e.changedTouches • e.rotation/scale • e.pageX(Y)/clientX(Y)
None
Why HammerJs?
Why HammerJs?
Why HammerJs? ✓ Small (3.96kb) ✓ Multiple (Tap, Pan,
Rotate…) ✓ Compatible (touch, mouse, pointerEvents) ✓ Extensible (easy to define new gesture) ✓ Easy to Learn (just like iOS gestures)
Browser Support ✓ Compatible
How to use var hm = new Hammer(element, options); hm.on('tap',
function(e) { console.log(e); }); hm.on('swipe', function(e) { console.log(e.velocity); console.log(e.direction); }); hm.on('pan', function(e) { var x = e.deltaX + 'px', y = e.deltaY + 'px'; element.style.tranform = 'translate3d(' + x + ',' + y + ',0)'; }); ✓ Multiple
More Control var hm = new Hammer.Manager(element); hm.add( new Hammer.Rotate({
pointers: 2 }) ); hm.add( new Hammer.Tap({ event: 'tripleTap', taps: 3 }) ); hm.on('rotate', function(e) { console.log(e.rotation); }); hm.on('tripleTap', function(e) { console.log(e.tapCount); }); ✓ Extensible
HammerJs vs S.EventTarget var hm = new Hammer.Manager(); hm.add( new
Hammer.Tap({}) ); hm.on('tap', callback); hm.off('tap', callback); hm.emit('tap', data); var et = S.EventTarget; et.publish('select', {}); et.on('select', callback); et.detach('select', callback); et.fire('tap', data);
Recognizer ✓ Extensible
Recognizer HammerJs iOS Gesture ✓ Easy to Learn
GestureRecognizer
Recognizer Types
Recognizer States
recognizeWith var hm = new Hammer.Manager(element); hm.add( new Hammer.Rotate() );
hm.add( new Hammer.Pinch() ); hm.get('pinch').recognizeWith(hm.get('rotate'));
requireFailure var hm = new Hammer.Manager(element); var singleTap = new
Hammer.Tap({ event: 'singletap' }); var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 }); hm.add([singleTap, doubleTap]); doubleTap.recognizeWith(singleTap); singleTap.requireFailure(doubleTap);
touch-action https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/touchaction.html
Hammer Inside Manager Input Recognizers TouchAction touch, mouse, pen auto,
pan-x, pan-y manipulation pan, pinch, press rotate, swipe, tap compute update add update init addEvent preventDefault emit
None
what’s next
✓ mpi/carousel ✓ mpi/slider ✓ mpi/image-‐preview ✓
mpi/drag-‐drop ✓ mpi/list-‐view ✓ mpi/side-‐nav ✓ act/xx-‐game ✓ and more… what’s next
Join us!!!
Join us!!!
Join us!!!
• http://hammerjs.github.io/ • http://www.lukew.com/ff/entry.asp?1071 • https://developer.apple.com/library/ios/documentation/EventHandling/Conceptual/ EventHandlingiPhoneOS/GestureRecognizer_basics/ GestureRecognizer_basics.html • http://www.google.com/design/spec/patterns/gestures.html#gestures-touch-
mechanics • http://www.windowsphone.com/en-us/how-to/wp7/start/gestures-flick-pan-and- stretch references
None
THE END.