插件描述: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. java与.net比较学习系列(5) 流程控制语句

    java中流程控制语句主要分为以下几类,第一,条件语句,主要包括if语句和switch语句.第二,循环语句,主要包括while循环语句,for循环语句.第三,跳转语句,主要包括三种,break跳出语句 ...

  2. poj 1523 SPF(tarjan求割点)

    本文出自   http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...

  3. IOS中对图片进行重绘处理的方法总结

    一.CGImageRef是什么 CGImageRef是定义在QuartzCore框架中的一个结构体指针,用C语言编写.在CGImage.h文件中,我们可以看到下面的定义: ? 1 typedef st ...

  4. Emit技术使用实例及应用思路

    System.Reflection.Emit提供了动态创建类并生成程序集的功能. 适用于.NET Framework 2.0及其以后的版本. 动态生成类在对于O/R Mapping来说有很大的作用,在 ...

  5. 1228.1——计算器(未使用MVC设计模式)

    #import "ViewController.h"typedef enum{    kStausNum,    kStausOperation}kStaus; typedef e ...

  6. C#如何解决对ListView控件更新以及更新时界面闪烁问题

    第一个问题:如何更新ListView控件内容 很多时候运行窗体程序时,由于程序中使用了多线程加之操作不当,所以在对控件操作时会出现下面这样的异常:   这是因为我们在窗体中添加的控件都有属于自己的线程 ...

  7. js 之 Post发送请求

    // ajax 对象 function ajaxObject() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new X ...

  8. QT TCP/IP

    QT 网络通信(TCP/IP) 服务端: 一.监听新的客户端接入(QTcpServer) 重写函数 incomingConnection(qintptr socketDescriptor) 二.服务端 ...

  9. Fedora19/18/17安装显卡驱动和无限网卡驱动

    一.安装nvidia显卡驱动 1. 切换到root用户          su - 2. 确定当前Linux内核及SELinux policy 是否为最新          yum update ke ...

  10. css3属性:column分栏

    css3选择器中提出了分栏的属性,其浏览器支持情况为:Internet Explorer 10 和 Opera 支持 column 属性,Firefox 支持替代的 -moz-column 属性,Sa ...