触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作。要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线。
下图是各种触摸事件说明:
本文我们介绍 11 个用来处理触摸事件以及支持多点触摸的 JS 库:
- Events: Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, DragOther features: Built-in jQuery-like methods. It uses $$ to avoid conflict.File size: 13KB minifiedStandlone: Yes
- Events: Tap, Double tap, hold, drag, transform (pinch)Other features: Javascript library focused only for multi-touch gesturesFile size: 2KB minifiedStandlone: Yes
- Events: long press, drag, pinch, rotate, swipeOther features: jQuery plugin for webkit browsers and browsers that support outch eventsFile size: ~2.72KB minifiedStandlone: No, need jQuery framework
- Events: Swipe, pinch, touch hold Other features: Touch events are separated into different files.File size: -Standlone: No, need MooTools
- Events: Touch, Swipe, Tap, Double tap, Swipe left, Swipe Right, Swipe up, Swipe downOther features: No android support yetFile size: 4KBStandlone: No, need jQuery
- 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 directionsOther features: Bundled with many gestures and useful eventsFile size: 16KB minified Standlone: No, need jQuery
- Events: Swipes in 4 directions, 1,2 fingers touchOther features: Allows swiping and page scrollingFile size: 25KBStandlone: No, need jQuery
- Events: Tap, Long Tap, Double tap, touchable move, touchable endOther features: Unifies touch and mouse eventsFile size: 1.96KBStandlone: No, need jQuery
- Events: touch start, touch end, touch end, touch move, mouse down, mouse up, mouse moveOther features: PhoneGap and mobile web friendlyFile size: 612 bytes minifiedStandlone: Yes
- Events: DragOther features: Uses CSS3 animations, built-in many drag featuresFile size: 16KBStandlone: No, need jQuery
- Events: Tap, Double tap, Swipe, Flick, Pinch, Pinch arrow, Pinch widen, Pinch endOther features: Jester makes recognising gestures on DOM elements really easyFile size: 25KBStandlone: Yes
官网地址:http://jgestures.codeplex.com/
文档版本号: v0.7,由neuedigitale编辑,2012年5月8日
最新稳定版:
jGestures简介
jGestures插件允许你如同原生的jQuery事件一样监听以下事件:'pinch'(缩放手势), 'rotate'(旋转手势), 'swipe'(滑动手势), 'tap'(轻触) 以及 'orientationchange'(改变设备方向)。当然,部分事件在PC浏览器上可以通过转换实现。比如 "tapone" 事件可以被 "clicking"事件触发,鼠标手势也可以产生"swipe"事件。
使用示例
- $('#swipe').bind('swipeone',eventHandler);