移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库

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
 
// 先要对监听的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
 
$( "#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)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值