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

简介:
11个处理触摸事件和多点触摸的JS库

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

下图是各种触摸事件说明:

<ignore_js_op>



本文我们介绍11个用来处理触摸事件以及支持多点触摸的JS库:

1.QUO JS

QuoJS是一个小型、模块化、面向对象的JavaScript库,用于移动Web开发中简化HTML文档遍历、事件处理和Ajax交互等功能。

Events: Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, Drag

Other features: Built-in jQuery-like methods. It uses $$ to avoid conflict.

File size: 13KB minified

Standlone: Yes

2.Hammer JS

Hammer.js是一个轻量级的JavaScript库(仅有2kb),能让你的网站轻松实现触控事件。它依赖于jQuery,用来控制触摸设备上的多点触控特性。

Events: Tap, Double tap, hold, drag, transform (pinch)

Other features: Javascript library focused only for multi-touch gestures

File size: 2KB minified

Standlone: Yes

Hammer.js已经在IOS5系统的iPad1,IOS5系统的iPhone,Android 2.3.3的三星Galaxy S以及Goolge Chrome 17测试可用。在桌面浏览器上鼠标能够模拟单个手指的触控事件。在Android 2与3默认的浏览器以及FireFox 10不支持多点触控事件,所以在Android,FireFox 1.1(Nokia N900)上没有transform。Windows Phone 7.5不支持触摸事件,mouse event支持也很糟糕。

3.Touchy

Events: long press, drag, pinch, rotate, swipe

Other features: jQuery plugin for webkit browsers and browsers that support outch events

File size: ~2.72KB minified

Standlone: No, need jQuery framework

4.Mootools-mobile

Events: Swipe, pinch, touch hold

Other features: Touch events are separated into different files.

File size: -

Standlone: No, need MooTools

5.jQuery doubletap

Events: Touch, Swipe, Tap, Double tap, Swipe left, Swipe Right, Swipe up, Swipe down

Other features: No android support yet

File size: 4KB

Standlone: No, need jQuery

6.jGestures

Events: 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

Other features: Bundled with many gestures and useful events

File size: 16KB minified

Standlone: No, need jQuery

7.Touch Swipe

Events: Swipes in 4 directions, 1,2 fingers touch

Other features: Allows swiping and page scrolling

File size: 25KB

Standlone: No, need jQuery

8.Touchable

Events: Tap, Long Tap, Double tap, touchable move, touchable end

Other features: Unifies touch and mouse events

File size: 1.96KB

Standlone: No, need jQuery

9.thumbs.js

Events: touch start, touch end, touch end, touch move, mouse down, mouse up, mouse move

Other features: PhoneGap and mobile web friendly

File size: 612 bytes minified

Standlone: Yes

10.jQuery.pep.js

Events: Drag

Other features: Uses CSS3 animations, built-in many drag features

File size: 16KB

Standlone: No, need jQuery

11.Jetster

Events: Tap, Double tap, Swipe, Flick, Pinch, Pinch arrow, Pinch widen, Pinch end

Other features: Jester makes recognising gestures on DOM elements really easy

File size: 25KB

Standlone: Yes

英文出自:11 Multi-touch and Touch events Javascript libraries


--------------------------------------------------------------------------------------------------------------------------------------

图片转场效果 
http://www.apkbus.com/android-137593-1-1.html
sqlite的简单示例 
http://www.apkbus.com/android-137594-1-1.html
新浪微博在iOS中的应用 
http://www.apkbus.com/android-137595-1-1.html
NSDatePicker 
http://www.apkbus.com/android-137597-1-1.html
IOS隐藏键盘 
http://www.apkbus.com/android-137599-1-1.html
UIView显示边栏的方法 
http://www.apkbus.com/android-137600-1-1.html
11个处理触摸事件和多点触摸的JS库 
http://www.apkbus.com/android-137601-1-1.html
URL转码 
http://www.apkbus.com/android-137602-1-1.html
Toast功能的实现 
http://www.apkbus.com/android-137604-1-1.html
AdMob横竖屏自动切换 
http://www.apkbus.com/android-137605-1-1.html
如何在Xcode4.4中使用Objective-C的对象下标表示法 
http://www.apkbus.com/android-137606-1-1.html
iphone imageview 点击事件 click 
http://www.apkbus.com/android-137607-1-1.html
UIWebView背景透明且无拖拽后的上下阴影 
http://www.apkbus.com/android-137609-1-1.html
生成ipa 这个是自己总结的,ios5.1.1越狱系统,xcode4.3.3可用 
http://www.apkbus.com/android-137610-1-1.html
读取PDF 
http://www.apkbus.com/android-137612-1-1.html
汉字转拼音的实现 
http://www.apkbus.com/android-137613-1-1.html
ASIHTTPRequest类库的使用 
http://www.apkbus.com/android-137615-1-1.html
给UITableView中的数据排序 
http://www.apkbus.com/android-137616-1-1.html
取色功能的实现 
http://www.apkbus.com/android-137618-1-1.html
IOS中GPS定位偏移纠正(适用于Google地图) 
http://www.apkbus.com/android-137621-1-1.html
使用wsdl2objc实现Soap 
http://www.apkbus.com/android-137622-1-1.html
iOS5中的UIAlertView 
http://www.apkbus.com/android-137623-1-1.html
Objective-C可变参数函数 
http://www.apkbus.com/android-137624-1-1.html
ios 判断设备的GPS功能是否开启 
http://www.apkbus.com/android-137626-1-1.html
启动界面Default.png全屏 
http://www.apkbus.com/android-137627-1-1.html
仿App Store的购买Button 
http://www.apkbus.com/android-137628-1-1.html
也来谈谈CFRunLoop(NSRunLoop) 
http://www.apkbus.com/android-137629-1-1.html
iphone,ipad模拟器截图(小方法) 
http://www.apkbus.com/android-137631-1-1.html
自定义导航栏上的返回按钮UINavigationController 
http://www.apkbus.com/android-137633-1-1.html
UIVideoEditorController 使用  

http://www.apkbus.com/android-137634-1-1.html


本文转自qianqianlianmeng博客园博客,原文链接:http://www.cnblogs.com/aimeng/p/3253095.html,如需转载请自行联系原作者

相关文章
|
1月前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
1月前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
18 3
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
3天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
19 2
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
14 3
|
2天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数,利用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。例如,一个简单的Generator函数可以这样表示: ```javascript function* generator() { yield &#39;Hello&#39;; yield &#39;World&#39;; } ``` 创建实例后,通过`.next()`逐次输出&quot;Hello&quot;和&quot;World&quot;,展示其暂停和恢复的特性。
10 0
|
2天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
13 2
|
3天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
7 1
|
3天前
|
JavaScript 前端开发
js开发:请解释同步和异步编程的区别。
同步编程按顺序执行,易阻塞;异步编程不阻塞,提高效率。同步适合简单操作,异步适合并发场景。示例展示了JavaScript中同步和异步函数的使用。
13 0
|
7天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。