quojs 及 转:11个处理触摸事件和多点触摸的JS库

QuoJs官方文档
http://www.360doc.com/content/15/0504/18/11984479_468037372.shtml

====

11个处理触摸事件和多点触摸的JS库

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

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

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

本文我们介绍11个用来处理触摸事件以及支持多点触摸的JS库:

1.QUO JS

QuoJS是一个小型、模块化、面向对象的JavaScript库,用于移动Web开发中简化HTML文档遍历、事件处理和Ajax交互等功能。

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

2.Hammer JS

Hammer.js是一个轻量级的JavaScript库(仅有2kb),能让你的网站轻松实现触控事件。它依赖于jQuery,用来控制触摸设备上的多点触控特性。

Events: Tap, Double tap, hold, drag, transform (pinch)

Other features: Javascript library focused only for multi-touch gestures

File size: 2KB minified

Standlone: Yes

Hammer.js已经在IOS5系统的iPad1,IOS5系统的iPhone,Android 2.3.3的三星Galaxy S以及Goolge Chrome 17测试可用。在桌面浏览器上鼠标能够模拟单个手指的触控事件。在Android 2与3默认的浏览器以及FireFox 10不支持多点触控事件,所以在Android,FireFox 1.1(Nokia N900)上没有transform。Windows Phone 7.5不支持触摸事件,mouse event支持也很糟糕。

3.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

4.Mootools-mobile

Events: Swipe, pinch, touch hold

Other features: Touch events are separated into different files.

File size: -

Standlone: No, need MooTools

5.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

6.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

7.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

8.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

9.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

10.jQuery.pep.js

Events: Drag

Other features: Uses CSS3 animations, built-in many drag features

File size: 16KB

Standlone: No, need jQuery

11.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

回复

你还没有登录,请先登录 匿名评论(无需注册)

时间: 2024-10-07 05:00:29

quojs 及 转:11个处理触摸事件和多点触摸的JS库的相关文章

Quick cocos2dx-Lua(V3.3R1)学习笔记(十三)-----继续触摸事件之多点触摸

在前面,我们提过了单点触摸,下面我们就试一下多点触摸的用法(我用的是cocos code ide进行手机调试,不会的,进入前一篇查看) function MainScene:ctor() local sprite = display.newSprite("close.png") --自己随便找个图片资源吧 sprite:align(display.CENTER, display.cx, display.cy) sprite:addTo(self) sprite:setTouchEnab

Android触摸事件(二)-TouchUtils,触摸辅助工具类

目录 目录 概述 关于拖动 原理 实现过程 关键变量定义 事件处理回调 偏移量计算 实现 关于缩放 原理 实现过程 缩放比例计算方法 事件处理回调 变量定义 缩放流程 关于辅助功能 使用方法 源码 概述 此类的主要作用是封装了一些触摸事件需要常用的操作,只需要实现简单的接口即可以使用.实现操作如下: 界面拖动(基于单点触摸的移动事件) 界面的缩放(基于两点触摸的移动事件) 此类只是一个辅助工具类,并不是必须的也不需要继承此类就可以使用. 此类基于AbsTouchEventHandle类回调的事件

Android触摸事件(一)-TouchEventHelper

文件夹 文件夹 概述 关于更新 2016-08-31 2016-06-20 关于单点触摸事件singleTouch 单击的两种方式 关于双击事件 双击事件的检測逻辑 双击事件触发的时机 关于多点触摸事件multiTouch 两点触摸中的移动事件 两点触摸事件的触发过程 两点触摸的事件 实现 变量定义 触摸事件流程 自己定义事件计时方案 自己定义事件触发区域 触摸事件处理规则 关于回调的方法 触摸事件处理源代码 双击事件的优化处理 怎样检測当次触摸事件的单击事件 怎样检測触发双击事件 辅助补充逻辑

cocos2d-x 启动触摸事件

cocos2d-x的触摸事件分为  单点触摸事件 及 多点触摸事件 单点触摸事件: void A::onEnter(){ CCLayer::onEnter(); CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, false); } void A::onExit(){ CCDirector::sharedDirector()->getTouchDispatcher()->r

深入了解触摸事件的分发

1. 触摸动作及事件序列 (1)触摸事件的动作 触摸动作一共有三种:ACTION_DOWN.ACTION_MOVE.ACTION_UP.当用户手指接触屏幕时,便产生一个动作为ACTION_DOWN的触摸事件,此时若用户的手指立即离开屏幕,会产生一个动作为ACTION_UP的触摸事件:若用户手指接触屏幕后继续滑动,当滑动距离超过了系统中预定义的距离常数,则产生一个动作为ACTION_MOVE的触摸事件,系统中预定义的用来判断用户手指在屏幕上的滑动是否是一个ACTION_MOVE动作的这个距离常量叫

iOS开发笔记--iOS中的触摸事件和手势处理

iOS中的事件可以分为三大类:原文:http://my.oschina.net/aofe/blog/268749 1> 触摸事件 2> 加速计事件 3> 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为"响应者对象". UIApplication,UIViewController,UIView都继承自UIResponder,因此它们都是响应者对象,都能够接收并处理事件. UIRespon

移动端拖拽(模块化开发,触摸事件,webpack)

通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

一个demo让你彻底理解Android触摸事件的并发

注:本文涉及的demo的地址:https://github.com/absfree/TouchDispatch 1. 触摸动作及事件序列 (1)触摸事件的动作 触摸动作一共有三种:ACTION_DOWN.ACTION_MOVE.ACTION_UP.当用户手指接触屏幕时,便产生一个动作为ACTION_DOWN的触摸事件,此时若用户的手指立即离开屏幕,会产生一个动作为ACTION_UP的触摸事件:若用户手指接触屏幕后继续滑动,当滑动距离超过了系统中预定义的距离常数,则产生一个动作为ACTION_MO

iOS中的触摸事件和手势处理

iOS中的事件可以分为三大类: 1> 触摸事件 2> 加速计事件 3> 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为"响应者对象". UIApplication,UIViewController,UIView都继承自UIResponder,因此它们都是响应者对象,都能够接收并处理事件. UIResponder UIResponder内部提供了方法来处理事件; 1> 触摸事件 一