hammer.js是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的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/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/hammer.js/jquery.hammer.js"
></script>
$(
"#element"
)
.hammer({
// 对DOM进行一些初始化,这里可以加入一些参数
})
.bind(
"tap"
,
function
(ev) {
console.log(ev);
});
|
官网地址:http://eightmedia.github/hammer.js/ (带演示)
源码地址:https://github/EightMedia/hammer.js
文件大小: 23K(源码)、6K(minified)
更多推荐
Hammer.js 移动设备触摸手势js库
发布评论