hammer.js 是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。
hammer.js 不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试。(JS仔在自己的随手背项目里面也用了hammer.js,真心好用)
使用方法
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>
// 先要对监听的DOM进行一些初始化
var
hammer
=
new
Hammer
(
document
.
getElementById
(
"container"
)
)
;
// 然后加入相应的回调函数即可
hammer
.
ondragstart
=
function
(
ev
)
{
}
;
// 开始拖动
hammer
.
ondrag
=
function
(
ev
)
{
}
;
// 拖动中
hammer
.
ondragend
=
function
(
ev
)
{
}
;
// 拖动结束
hammer
.
onswipe
=
function
(
ev
)
{
}
;
// 滑动
hammer
.
ontap
=
function
(
ev
)
{
}
;
// 单击
hammer
.
ondoubletap
=
function
(
ev
)
{
}
;
//双击
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
)
;
}
)
;
|
官网地址:http://eightmedia.github.com/hammer.js/ (带演示)
源码地址:https://github.com/EightMedia/hammer.js
文件大小: 23K(源码)、6K(minified)