平板_手機開發_13 個處理觸摸事件和多點觸摸的JS 庫

觸摸屏是如今全部智能手機的標配，還包括各類平板設備，並且不少桌面也慢慢在開始支持觸摸操做。要開發支持觸摸屏設備的 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

 

   

jGestures: jQuery的手勢事件插件

官網地址：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);

事件列表

orientationchange
表明設備順時針或者逆時針旋轉.此事件能夠被設備觸發,可能使用的是重力傳感器.

pinch
縮放手勢(兩個手指在屏幕上的相對運動)

rotate
旋轉手勢(兩個手指順時針或者逆時針旋轉)

swipemove
在正在滑動時觸發(在設備屏幕上移動手指,好比:拖動)

swipeone
單點滑動手勢,滑動完成後觸發(一個手指在屏幕上移動)

swipetwo
兩點滑動(兩個手指在屏幕上方向一致的滑動)

swipethree
三點滑動(三個手指在屏幕上方向一致的滑動)

swipefour
四點滑動(四個手指在屏幕上方向一致的滑動)

swipeup
向上滑動,在嚴格的向上滑動手勢完成後觸發

swiperightup
向右上角滑動,在向右且向上的滑動手勢完成後觸發

swiperight
向右滑動,在嚴格的向右滑動手勢完成後觸發

swiperightdown
向右下角滑動,在向右且向下的滑動手勢完成後觸發

swipedown
向下滑動,在嚴格的向下滑動手勢完成後觸發

swipeleftdown
向左下角滑動,在向左且向下的滑動手勢完成後觸發

swipeleft
向左滑動,在嚴格的向左滑動手勢完成後觸發

swipeleftup
向左上角滑動,在向左且向上的滑動手勢完成後觸發

tapone
在單個手指輕點的手勢後觸發

taptwo
在兩個手指一塊兒輕點的手勢後觸發

tapthree
在三個手指一塊兒輕點的手勢後觸發

pinchopen
撐開手勢,當兩個手指撐大並離開設備時觸發.

pinchclose
捏緊手勢,當兩個手指捏緊並離開設備時觸發.

rotatecw
兩個手指順時針旋轉而且離開屏幕時觸發(two fingers rotating clockwise)

rotateccw
兩個手指逆時針旋轉而且離開屏幕時觸發 (two fingers rotating counterclockwise)

shake
當檢測到設備正在搖晃時觸發

shakefrontback
當檢測到搖晃動做，且能夠被解讀爲先後移動之時觸發.

shakeleftright
當檢測到搖晃動做，且能夠被解讀爲左右移動之時觸發.

shakeupdown
當檢測到搖晃動做，且能夠被解讀爲上下移動之時觸發.