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

发布时间:2012-06-14

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

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

本文我们介绍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

译文来自:oschina