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

虽然一些触摸事件,自己写起来也比较简单,但为了尽量不重复的造轮子,提高开发效率。这里收集整理了一些常用的手势事件脚本插件来供你参考。
QUO JS
支持事件:Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, Drag
其它特性:类似jQuery的调用方法. 使用 $$ 方法名避免和jQuery冲突.
文件大小:压缩后 13KB
独立使用:是Hammer JS
支持事件:Tap, Double tap, hold, drag, transform (pinch)
其它特性:主要用于多点触摸的Js库。
文件大小:压缩后 2KB
独立使用:是jQuery Mobile
支持事件:scrollstart, scrollstop, swipe, swipeleft, swiperight, tap, taphold, vclick, vmousecancel, vmousedown, vmousemove, vmouseout, vmouseover
其它特性:特别针对触摸设备使用的一套框架,但笔者在使用swipeleft和swiperight事件时,感觉不是特别准确。并且在设置了相应的配置项,并没有起作用。如果你知道正确的方法,请不吝惜的在留言里告诉我吧。多谢!!!
文件大小:压缩后 142KB
独立使用:否, 依赖 jQueryTouchy
支持事件:long press, drag, pinch, rotate, swipe
其它特性:以jQuery插件的形式使用,支持webkit内核的浏览器以及其它支持触摸事件的浏览器。
文件大小:~2.72KB
独立使用:否, 依赖 jQueryMootools-mobile
支持事件:Swipe, pinch, touch hold
其它特性:触摸事件依赖引入单独的脚本文件。
文件大小:-
独立使用:否, 依赖 MooToolsjQuery doubletap
支持事件:Touch, Swipe, Tap, Double tap, Swipe left, Swipe Right, Swipe up, Swipe down
其它特性:尚不支持android设备。
文件大小:4KB
独立使用:否, 依赖 jQueryjGestures
支持事件: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
独立使用:否, 依赖 jQueryTouch Swipe
支持事件:四个方向的滑动, 1或2只手指的触摸
其它特性:支持四个方向的滑动及页面滚动。
文件大小:25KB
独立使用:否, 依赖 jQueryTouchable
支持事件:Tap, Long Tap, Double tap, touchable move, touchable end
其它特性:统一了触摸和鼠标事件。
文件大小:1.96KB
独立使用:否, 依赖 jQuerythumbs.js
支持事件:touch start, touch end, touch end, touch move, mouse down, mouse up, mouse move
其它特性:主要是给浏览器添加touch事件,对PhoneGap及其它移动web支持良好。
文件大小:不到1K,压缩后 700 bytes(版本0.6.0)
独立使用:是jQuery.pep.js
支持事件:Drag
其它特性:使用CSS3动画,内置很多的拖动特性。
文件大小:16KB
独立使用:否, 依赖 jQueryJetster
支持事件:Tap, Double tap, Swipe, Flick, Pinch, Pinch arrow, Pinch widen, Pinch end
其它特性:Jester 使得作用在DOM元素上的手势变得相当简单。
文件大小:25KB
独立使用:是
移动web开发,12个触摸及多点触摸事件常用Js插件的更多相关文章
- ios开发——实用技术篇Swift篇&多点触摸与手势识别
多点触摸与手势识别 //点击事件 var atap = UITapGestureRecognizer(target: self, action: "tapDo:") self.vi ...
- 5.触摸touch,单点触摸,多点触摸,触摸优先和触摸事件的吞噬
1 触摸 Coco2dx默认仅仅有CCLayer及其派生类才有触摸的功能. 2 单点触摸 打开触摸开关和触摸方式 setTouchEnabled(true); setTouchMode(kCCT ...
- web前端常用js插件
第一款:截图插件html2Canvas.js html2是一款强大的截图插件,只需引入js文件,依照官方给定的截图方法,就能截取对应DOM区域的内容.对于有些截图出现模糊偏移的问题,网上也有一堆解决方 ...
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- Web开发标配--开发人员工具-F12
喜欢从业的专注,七分学习的态度. 360浏览器-开发工具 谷歌-开发工具 IE-开发工具 Web开发中最最烦琐的莫过于调整CSS和JS,而最方便最高效的方式就是利用浏览器的开发工具调整.CSS可以实时 ...
- Kali Linux Web渗透测试手册(第二版) - 1.1 - Firefox浏览器下安装一些常用的插件
一.配置KALI Linux和渗透测试环境 在这一章,我们将覆盖以下内容: l 在Windows和Linux上安装VirtualBox l 创建一个Kali Linux虚拟机 l 更新和升级Ka ...
- <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库
触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...
- ios实例开发精品文章推荐(8.12)11个处理触摸事件和多点触摸的JS库
11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...
随机推荐
- win7系统下的FTP配置
2016-07-12 工作中需要在win7操作系统下配置FTP,遇到许多问题,所以记录下来方便以后解决问题. FTP是文件传输协议的简称.用于Internet上的控制文件的双向传输.同时,它也是一个应 ...
- Android studio快捷键大全 和 eclipse对照(原)
Ctrl+空格 代码提示 (同Eclipse中Alt+/) Ctrl+Shjft+N 项目 ...
- cocos2d3.x在android下屏蔽多点触控
ios上很简单的在AppController.mm里 [eaglView setMultipleTouchEnabled:YES] 设置为NO,就是单点触控了,无需更改cocos底层代码; andro ...
- Python::re 模块 -- 在Python中使用正则表达式
前言 这篇文章,并不是对正则表达式的介绍,而是对Python中如何结合re模块使用正则表达式的介绍.文章的侧重点是如何使用re模块在Python语言中使用正则表达式,对于Python表达式的语法和详细 ...
- MCMC: The Metropolis-Hastings Sampler
本文主要译自:MCMC:The Metropolis-Hastings Sampler 上一篇文章中,我们讨论了Metropolis 采样算法是如何利用马尔可夫链从一个复杂的,或未归一化的目标概率分布 ...
- 【php学习】PHP 入门经典第一章笔记
第一章: php在线手册:http://php.net/manual/zh/index.php 在开始学习PHP之前,先来看一个合格的PHP程序员今后应具备哪些知识,这里只是笔者的一些总结,希望对读者 ...
- 深入理解kmp中的next数组
next数组 1. 如果对于值k,已有p0 p1, ..., pk-1 = pj-k pj-k+1, ..., pj-1,相当于next[j] = k. 此意味着什么呢?究其本质,next[j] = ...
- 第三方Girdview中文件下载的方法,以及js显示图片
/// <summary> /// 文件下载事件 /// </summary> /// <param name="sender"></ ...
- leetcode 186. Reverse Words in a String II 旋转字符数组 ---------- java
Given an input string, reverse the string word by word. A word is defined as a sequence of non-space ...
- {part1}DFN+LOW(tarjan)割点
什么是jarjan? 1)求割点 定义:在无向连通图中,如果去掉一个点/边,剩下的点之间不连通,那么这个点/边就被称为割点/边(或割顶/桥). 意义:由于割点和割边涉及到图的连通性,所以快速地求出割点 ...