如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台。与桌面开发不同的是,在移动领域中,不同的操作系统、大量不同屏幕尺寸的移动设备、触摸手势操作等,这都给开发者带来了一定的难度和挑战。

虽然一些触摸事件,自己写起来也比较简单,但为了尽量不重复的造轮子,提高开发效率。这里收集整理了一些常用的手势事件脚本插件来供你参考。

    1. QUO JS

      支持事件:Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, Drag
      其它特性:类似jQuery的调用方法. 使用 $$ 方法名避免和jQuery冲突.
      文件大小:压缩后 13KB
      独立使用:

    2. Hammer JS

      支持事件:Tap, Double tap, hold, drag, transform (pinch)
      其它特性:主要用于多点触摸的Js库。
      文件大小:压缩后 2KB
      独立使用:

    3. jQuery Mobile

      支持事件:scrollstart, scrollstop, swipe, swipeleft, swiperight, tap, taphold, vclick, vmousecancel, vmousedown, vmousemove, vmouseout, vmouseover
      其它特性:特别针对触摸设备使用的一套框架,但笔者在使用swipeleft和swiperight事件时,感觉不是特别准确。并且在设置了相应的配置项,并没有起作用。如果你知道正确的方法,请不吝惜的在留言里告诉我吧。多谢!!!
      文件大小:压缩后 142KB
      独立使用:否, 依赖 jQuery

    4. Touchy

      支持事件:long press, drag, pinch, rotate, swipe
      其它特性:以jQuery插件的形式使用,支持webkit内核的浏览器以及其它支持触摸事件的浏览器。
      文件大小:~2.72KB
      独立使用:否, 依赖 jQuery

    5. Mootools-mobile

      支持事件:Swipe, pinch, touch hold
      其它特性:触摸事件依赖引入单独的脚本文件。
      文件大小:-
      独立使用:否, 依赖 MooTools

    6. jQuery doubletap

      支持事件:Touch, Swipe, Tap, Double tap, Swipe left, Swipe Right, Swipe up, Swipe down
      其它特性:尚不支持android设备。
      文件大小:4KB
      独立使用:否, 依赖 jQuery

    7. jGestures

      支持事件:Orientation change, Pinch, Rotate, Swipe move, Swipe in multi direction, Swipe with 1,2,3 fingers, Tap with 1,2,3 fingers, pinch open, pinch close, shake in different directions
      其它特性:支持多种手势,以及常用的事件。
      文件大小:压缩后 16KB
      独立使用:否, 依赖 jQuery

    8. Touch Swipe

      支持事件:四个方向的滑动, 1或2只手指的触摸 
      其它特性:支持四个方向的滑动及页面滚动。
      文件大小:25KB
      独立使用:否, 依赖 jQuery

    9. Touchable

      支持事件:Tap, Long Tap, Double tap, touchable move, touchable end
      其它特性:统一了触摸和鼠标事件。
      文件大小:1.96KB
      独立使用:否, 依赖 jQuery

    10. thumbs.js

      支持事件:touch start, touch end, touch end, touch move, mouse down, mouse up, mouse move
      其它特性:主要是给浏览器添加touch事件,对PhoneGap及其它移动web支持良好。
      文件大小:不到1K,压缩后 700 bytes(版本0.6.0)
      独立使用:

    11. jQuery.pep.js

      支持事件:Drag
      其它特性:使用CSS3动画,内置很多的拖动特性。
      文件大小:16KB
      独立使用:否, 依赖 jQuery

    12. Jetster

      支持事件:Tap, Double tap, Swipe, Flick, Pinch, Pinch arrow, Pinch widen, Pinch end
      其它特性:Jester 使得作用在DOM元素上的手势变得相当简单。
      文件大小:25KB
      独立使用:

移动web开发,12个触摸及多点触摸事件常用Js插件的更多相关文章

  1. ios开发——实用技术篇Swift篇&多点触摸与手势识别

    多点触摸与手势识别 //点击事件 var atap = UITapGestureRecognizer(target: self, action: "tapDo:") self.vi ...

  2. 5.触摸touch,单点触摸,多点触摸,触摸优先和触摸事件的吞噬

     1 触摸 Coco2dx默认仅仅有CCLayer及其派生类才有触摸的功能. 2 单点触摸 打开触摸开关和触摸方式 setTouchEnabled(true); setTouchMode(kCCT ...

  3. web前端常用js插件

    第一款:截图插件html2Canvas.js html2是一款强大的截图插件,只需引入js文件,依照官方给定的截图方法,就能截取对应DOM区域的内容.对于有些截图出现模糊偏移的问题,网上也有一堆解决方 ...

  4. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  5. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

  6. Web开发标配--开发人员工具-F12

    喜欢从业的专注,七分学习的态度. 360浏览器-开发工具 谷歌-开发工具 IE-开发工具 Web开发中最最烦琐的莫过于调整CSS和JS,而最方便最高效的方式就是利用浏览器的开发工具调整.CSS可以实时 ...

  7. Kali Linux Web渗透测试手册(第二版) - 1.1 - Firefox浏览器下安装一些常用的插件

    一.配置KALI Linux和渗透测试环境 在这一章,我们将覆盖以下内容: l  在Windows和Linux上安装VirtualBox l  创建一个Kali Linux虚拟机 l  更新和升级Ka ...

  8. <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库

    触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...

  9. ios实例开发精品文章推荐(8.12)11个处理触摸事件和多点触摸的JS库

    11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...

随机推荐

  1. js 文本框只能输入数字

    <input type="text" value="" style="ime-mode:Disabled"  onkeyup=&quo ...

  2. Android 如何通过代码模拟按钮点击 延时函数

    View.performClick();   比如: private Button mButton01;    mButton01 = (Button)findViewById(R.id.myButt ...

  3. C++中 vector(容器)的用法

    vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 用法: 1.文件包含: ...

  4. 最小生成树——kruskal算法

    kruskal和prim都是解决最小生成树问题,都是选取最小边,但kruskal是通过对所有边按从小到大的顺序排过一次序之后,配合并查集实现的.我们取出一条边,判断如果它的始点和终点属于同一棵树,那么 ...

  5. Laravel框架数据库CURD操作、连贯操作使用方法

    Laravel框架数据库CURD操作.连贯如何来操作了这个操作性是非常的方便简单了我们在这里来为各位介绍一篇相关的教程,具体的细节步骤如下文介绍.   Laravel是一套简洁.优雅的PHP Web开 ...

  6. ODOO的命令行调用以及config默认值

    通过odoo-bin 可以启动odoo server ,启动的过程中需要提供一些args,包括数据库设置,ip设置等 如果不想每次输入这些参数,可以直接修改odoo/tools/config.py中的 ...

  7. linux下根据进程名字获取PID,类似pidof(转)

    linux有一个命令行工具叫做pidof,可以根据用户输入的进程名字查找到进程号,但有时候我们需要在程序里实现,不想调用system,在查阅了很多版本的pidof源代码后,没有发现一个自己感觉比较好的 ...

  8. Pyside开篇杂记

    最近学习刚开始学习pyside,基本了解了一些类的用法,个人感觉就接触而言与pyqt并无本质区别. 双方资料基本可以相互借鉴,个人更倾向与pyside,查阅资料时也经常会在pyqt内得到解决方案. 之 ...

  9. [BZOJ 3191][JLOI 2013]卡牌游戏

    觉得这题很有必要讲一下! 现在发现在做概率题,基本是向 dp 和 马尔可夫链 靠齐 但是这一题真是把我坑了,因为状态太多,马式链什么的直接死了 我一开始的想法就是用 f[i][j] 表示剩余 i 个人 ...

  10. Python>>>使用Python和Pygame创建画板

    下面是画板截图 # -*- coding: utf-8 -*- import pygame from pygame.locals import * import math class Brush: d ...