插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。

使用方法:

<script src=<span class="string" style="color: rgb(221, 17, 68);">"http://eightmedia.github.com/hammer.js/hammer.js"</span>></script>

<span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 先要对监听的DOM进行一些初始化
<span class="keyword" style="font-weight: bold;">var hammer = new Hammer(document.getElementById("container"span>)); <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 然后加入相应的回调函数即可
hammer.ondragstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 开始拖动
hammer.ondrag = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动中
hammer.ondragend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动结束
hammer.onswipe = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 滑动 hammer.ontap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 单击
hammer.ondoubletap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//双击
hammer.onhold = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 长按 hammer.ontransformstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张开始
hammer.ontransform = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张中
hammer.ontransformend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张结束 hammer.onrelease = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 手指离开屏幕

还支持jQuery插件的形式调用

<span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>span>

$("#element")
.hammer({
// 对DOM进行一些初始化,这里可以加入一些参数
})
.bind("tap", function(ev) {
console.log(ev);
});

多点触控插件Hammer.js的更多相关文章

  1. Hammer.js 移动端手势库,多点触控插件

    jquery用法: 引入3个JS:<script src="jquery.js"></script> <script src="hammer ...

  2. wex5 实战 手指触屏插件 hammer的集成与优劣

    前言 前几天,给客户做了一个图片点击放大,很简单,客户说能不能双手指缩放图片呢? 想到了hammer,不管好用不好用,总得试. 网上居然没有像样的中文文档和成熟案例,有的文写的鬼都看不懂.还是自已动手 ...

  3. 插件: Hammer.js

    官网: http://hammerjs.github.io/  hammer.js 官网 http://hammerjs.github.io/api/ 官网API(官网写的实在太简了!不好用.注意里面 ...

  4. Js 之常见手势操作插件 Hammer.js

    一.下载 链接:https://pan.baidu.com/s/1UbEtSbT1xcmdzzTCaWmW1A提取码:ldqy 二.案例 三.代码 <!DOCTYPE html> < ...

  5. [示例] Firemonkey OnTouch 多点触控应用

    说明:Firemonkey OnTouch 多点触控应用,可同时多指移动多个不同控件 原码下载:[原创]TestMultitouchMove_多点触控应用_by_Aone.zip 运行展示:

  6. ccc 多点触控2

    经过不断的思考发现,如果是两个sprite都添加触控的时候,往往直接成单点触控, 但是如果是两个node的时候在node上面点击就会变成多点触控的形式 cc.Class({ extends: cc.C ...

  7. ccc 多点触控

    研究了一天,多点触控的点无法保存,只能模拟多点触控了 cc.Class({ extends: cc.Component, properties: { wheelStick:{ default:null ...

  8. Cocos2dx 多点触控

    1 最容易忽略的东西,对于ios平台,须得设置glView的属性: [__glView setMultipleTouchEnabled:YES]; 2 如果调用CCLayer的方法setTouchEn ...

  9. Android 多点触控与简单手势(一)

    现在一般的Android手机都会使用电容触摸屏最少可以支持两点触摸,多的可能是七八个,所以基本上都会支持多点触控, android系统中应用程序可以使用多点触控的事件来完成各种手势和场景需求. And ...

随机推荐

  1. class、interface、struct的差别

    1 struct和class有什么差别 1.1默认的继承訪问权限 Struct是public的,class是private的. 你能够写例如以下的代码: struct A { char a; }; s ...

  2. linux内核--内存管理(二)

    一.进程与内存     所有进程(执行的程序)都必须占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用途不一而不尽相同,有些内 ...

  3. leetcode先刷_Unique Paths II

    那么上述问题,假设这个矩阵堵塞障碍,不能在若干组合前面所用的方法,因为这么多的位置实际上是没有办法的事儿. 还有剩下的唯一合理的解决方案dp该.与最低要求,并且等,从右下角以前突起,对于位置(i, j ...

  4. Tomcat 配置篇

    Tomcat 配置一.Tomcat 基本介绍 1.关键目录 a) bin 该目录包含了启动.停止和启动其他的脚本,如startup.sh.shutdown.sh等; b) conf 配置文件和一些文档 ...

  5. Sql Server中charindex、patindex的区别

    SQL代码如下: select charindex('1,','121,1,1234') select patindex('%1,%','121,1,1234') ','121,1,1234') se ...

  6. SQL Server -SET NOCOUNT

    SET NOCOUNT 使返回的结果中不包含有关受 Transact-SQL 语句影响的行数的信息. 语法 SET NOCOUNT { ON | OFF } 注释 当 SET NOCOUNT 为 ON ...

  7. UVa1592 数据库(摘)

    输入一个n行m列的数据库(1<=n<=10000,1<=m<=10),是否存在两个不同行r1,r2和两个不同列c1,c2,使得这两行和这两行相同(即(r1,c1)和(r2,c1 ...

  8. 13年山东省赛 The number of steps(概率dp水题)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud The number of steps Time Limit: 1 Sec  Me ...

  9. poj3159 Candies(差分约束)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Candies Time Limit: 1500MS   Memory Limit ...

  10. kinect

    1.学习资料 http://blog.csdn.net/dustpg/article/details/37982311 https://github.com/mdkus/kinect-mssdk-op ...