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

最新推荐文章于 2016-09-19 18:52:00 发布

今晚打酱油8

最新推荐文章于 2016-09-19 18:52:00 发布

阅读量791

点赞数

分类专栏： Ajax JavaScript 前台页面制作

Ajax JavaScript 前台页面制作专栏收录该内容

73 篇文章 1 订阅

订阅专栏

锤子.js是一个强大的移动端触摸手势事件库，它能为网页加入Tap、DoubleTap、Swipe、Hold、Pinch、Drag等手势事件，简化开发者的工作流程。通过简单的API接口，开发者可以在桌面浏览器上调试触摸事件，无需额外的底层监听。本文详细介绍了锤子.js的使用方法及特点，并提供了官方演示和源码地址。

摘要由CSDN通过智能技术生成

http://www.tuicool.com/articles/zmIbuyE

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

时间 2013-05-12 00:02:00 博客园-原创精华区原文 http://www.cnblogs.com/cydmk/archive/2013/05/12/3073570.html

【原创】作者：一只猿

原文地址： http://www.92ez.com

转载请注明出处，谢谢

hammer.js 是一个多点触摸手势库，能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。 hammer.js不但支持触摸屏设备的浏览器，在桌面浏览器上，也能将鼠标的点击当做触摸，方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的js库，对有需要的朋友非常有帮助，奉上常用的一些方法调用文档。

使用方法：

<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插件的形式调用

<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）