觸摸屏是現在所有智能手機的標配,還包括各種平板設備,而且很多桌面也慢慢在開始支持觸摸操作。要開發支持觸摸屏設備的 Web 應用,我們需要借助瀏覽器的觸摸事件來實線。
下圖是各種觸摸事件說明:

本文我們介紹 11 個用來處理觸摸事件以及支持多點觸摸的 JS 庫:
- QUO JS
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 - Hammer JS
Events: Tap, Double tap, hold, drag, transform (pinch)
Other features: Javascript library focused only for multi-touch gestures
File size: 2KB minified
Standlone: Yes - 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 - Mootools-mobile
Events: Swipe, pinch, touch hold
Other features: Touch events are separated into different files.
File size: -
Standlone: No, need MooTools - 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 - 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 - 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 - 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 - 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 - jQuery.pep.js
Events: Drag
Other features: Uses CSS3 animations, built-in many drag features
File size: 16KB
Standlone: No, need jQuery - 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
官網地址:http://jgestures.codeplex.com/
文檔版本號: v0.7,由neuedigitale編輯,2012年5月8日
最新穩定版: jGestures v0.90 - shake
jGestures簡介
jGestures插件允許你如同原生的jQuery事件一樣監聽以下事件:'pinch'(縮放手勢), 'rotate'(旋轉手勢), 'swipe'(滑動手勢), 'tap'(輕觸) 以及 'orientationchange'(改變設備方向)。當然,部分事件在PC瀏覽器上可以通過轉換實現。比如 "tapone" 事件可以被 "clicking"事件觸發,鼠標手勢也可以產生"swipe"事件。
使用示例
- $('#swipe').bind('swipeone',eventHandler);
