移动开发框架,第【二】弹: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)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
2012-01-18 为android的HttpClient添加请求超时时间