hammer.js is a multi-touch gesture library, can be added to a web page Tap, Double Tap, Swipe, Hold, Pinch, Drag and other multi-touch event , replacing their own monitor underlying touchstart, touchmove, touchend event and write a lot of judgment logic pain.
hammer.js only browser that supports touch-screen device on the desktop browser, but also be able to touch as mouse clicks, easy developer debugging on a desktop browser. ( JS Aberdeen in their hand back the project which is also used hammer.js , really easy to use)
Instructions
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script
src
=
"http://eightmedia.github.com/hammer.js/hammer.js"
>
</script>
// first to listen to some initial DOM
var
hammer
=
new
Hammer
(
document
.
getElementById
(
"container"
)
)
;
// then the appropriate callback function to join
Hammer
.
the ondragstart
=
function
(
EV
)
{
}
;
// start dragging
Hammer
.
ondrag
=
function
(
EV
)
{
}
;
// Hauling
Hammer
.
dragend ondragend
=
function
(
EV
)
{
}
;
// End Drag
Hammer
.
OnSwipe
=
function
(
EV
)
{
}
;
// slide
Hammer
.
ONTAP
=
function
(
EV
)
{
}
;
// click
Hammer
.
ondoubletap
=
function
(
EV
)
{
}
;
// Double-
hammer
.
onhold
=
function
(
ev
)
{
}
;
// 长按
hammer
.
ontransformstart
=
function
(
ev
)
{
}
;
// 双指收张开始
hammer
.
ontransform
=
function
(
ev
)
{
}
;
// 双指收张中
hammer
.
ontransformend
=
function
(
ev
)
{
}
;
// 双指收张结束
hammer
.
onrelease
=
function
(
ev
)
{
}
;
// 手指离开屏幕
|
还支持jQuery插件的形式调用
|
1
2
3
4
5
6
7
8
9
|
<script
src
=
"http://eightmedia.github.com/hammer.js/jquery.hammer.js"
>
</script>
$
(
"#element"
)
.
hammer
(
{
// 对DOM进行一些初始化，这里可以加入一些参数
}
)
.
bind
(
"tap"
,
function
(
ev
)
{
console
.
log
(
ev
)
;
}
)
;
|
Official website address: http://eightmedia.github.com/hammer.js/ (with demo)
Source Address: https://github.com/EightMedia/hammer.js
File Size: 23K (source code), 6K (minified)
Reproduced in: https: //my.oschina.net/zhepama/blog/265025