博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
<WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库
阅读量:5148 次
发布时间:2019-06-13

本文共 3482 字,大约阅读时间需要 11 分钟。

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

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

本文我们介绍 11 个用来处理触摸事件以及支持多点触摸的 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
  •  
    Events: Tap, Double tap, hold, drag, transform (pinch)
    Other features: Javascript library focused only for multi-touch gestures
    File size: 2KB minified
    Standlone: Yes
  •  
    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
  •  
    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 down
    Other features: No android support yet
    File size: 4KB
    Standlone: 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 directions
    Other features: Bundled with many gestures and useful events
    File size: 16KB minified 
    Standlone: No, need jQuery
  •  
    Events: Swipes in 4 directions, 1,2 fingers touch
    Other features: Allows swiping and page scrolling
    File size: 25KB
    Standlone: No, need jQuery 
  •  
    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
  •  
    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
  •  
    Events: Drag
    Other features: Uses CSS3 animations, built-in many drag features
    File size: 16KB
    Standlone: No, need jQuery
  •  
    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简介

jGestures插件允许你如同原生的jQuery事件一样监听以下事件:'pinch'(缩放手势), 'rotate'(旋转手势), 'swipe'(滑动手势), 'tap'(轻触) 以及 'orientationchange'(改变设备方向)。当然,部分事件在PC浏览器上可以通过转换实现。比如 "tapone" 事件可以被 "clicking"事件触发,鼠标手势也可以产生"swipe"事件。

使用示例

[javascript] 
 
  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
当检测到摇晃动作,且可以被解读为上下移动之时触发.

转载于:https://www.cnblogs.com/zhwl/p/3525235.html

你可能感兴趣的文章
〖Python〗-- IO多路复用
查看>>
栈(括号匹配)
查看>>
Java学习 · 初识 面向对象深入一
查看>>
源代码如何管理
查看>>
vue怎么将一个组件引入另一个组件?
查看>>
bzoj1040: [ZJOI2008]骑士
查看>>
LeetCode 74. Search a 2D Matrix(搜索二维矩阵)
查看>>
利用SignalR来同步更新Winfrom
查看>>
反射机制
查看>>
CocoaPod
查看>>
css3实现漂亮的按钮链接
查看>>
BZOJ 1251: 序列终结者 [splay]
查看>>
云的世界
查看>>
初识DetNet:确定性网络的前世今生
查看>>
5G边缘网络虚拟化的利器:vCPE和SD-WAN
查看>>
MATLAB基础入门笔记
查看>>
【UVA】434-Matty&#39;s Blocks
查看>>
五、宽度优先搜索(BFS)
查看>>
运行一个窗体直接最大化并把窗体右上角的最大化最小化置灰
查看>>
Android开发技术周报 Issue#80
查看>>