平板_手機開發_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

官網地址: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"事件。

使用示例

[javascript] view plaincopy
  1. $('#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
當檢測到搖晃動作,且可以被解讀爲上下移動之時觸發.


最後一個:jqtouch ,網上資料很多,就不多多介紹了,大家可以根據項目需求來自己選擇,我以用過jqtouch和QUO。後面出具體用法(quo的)。

發佈了28 篇原創文章 · 獲贊 7 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章