11个处理触摸事件和多点触摸的JS库(转载)
触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作。要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现。
下图是各种触摸事件说明:
本文我们介绍11个用来处理触摸事件以及支持多点触摸的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
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支持也很糟糕。
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
英文出自:11 Multi-touch and Touch events Javascript libraries
译文来自:oschina
发表评论
-
基于脚本的动画的计时控制(“requestAnimationFrame”)(转载)
2014-03-04 19:12 951Internet Explorer 10 和使 ... -
IE11开发人员工具:UI响应工具详解
2014-02-27 18:33 892我讨厌debug,相信也没多少开发者会喜欢。但是当代码出 ... -
IE11开发人员工具:内存分析工具详解
2014-02-27 18:32 1382上篇我们跟大家介绍 ... -
E6与location.hash和Ajax历史记录 (转载)
2014-02-26 12:23 522为了在IE6中改变hash来保留历史记录实现ajax的前进 ... -
MIME Types(转载)
2013-12-31 10:20 606MIME Types - Complete List ... -
iframe历史记录问题(转载)
2013-10-17 10:21 1256在做页面统计的时候 ... -
前端类库精选(转)
2013-05-11 00:57 0优秀的前端类库,自己平时遇见了,这里Mark一下。 1、m ... -
10个chrome console实用小技巧(转)
2013-05-09 10:56 10271. 基本输出 让我们先从最常见的console.l ... -
CSS3那些不为人知的高级属性(转)
2013-04-19 13:35 905原文:CSS的未来:一些 ... -
JavaScript 时间、格式、转换及Date对象总结(转)
2013-04-10 14:49 685悲剧的遇到问题,从前台得到时间,“Tue Jan 29 16 ... -
如何制作一个可及性强(accessible)的网页弹框(转载)
2013-04-02 16:18 784英文原文:Making an accessib ... -
JavaScript MVC js也mvc(转载)
2013-03-16 23:59 668JavaScript MVC 中文:http://blog ... -
SUBLIME TEXT 2 设置文件详解
2012-12-27 11:21 1023Sublime Text 2是那种让人会一眼就爱上的编辑 ... -
两个按位非操作与Math.floor操作(译)
2012-12-10 18:17 922位操作符在我们编码过程中是容易被遗忘的,可能更多的源于我们 ... -
img中src为空的影响
2012-11-26 23:32 0这是我们经常能遇到的代码,可以直接用html标签或者Java ... -
IE6下position定位子元素溢出,父元素被撑开的解决思路。(转)
2012-11-13 18:04 1609在一些被常规的页面布局当中,我们常常需要通过positi ... -
chrome developer tool 调试技巧(转)
2012-11-12 13:16 818这篇文章是根据目前 chrome 稳定版(19.0.10 ... -
你清楚jquery是如何清除ajax缓存的吗?(转)
2012-11-11 11:19 1028大家都知道万恶的IE在ajax中往往只读取第一次ajax ... -
是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率 In JavaScript(转)
2012-11-10 23:33 688随着WebApp突飞猛进的发展,Javascript写的 ... -
Javascript基础
2012-11-10 23:25 0原文:http://bonsaiden.githu ...
相关推荐
Hammer.js:实现多点触摸手势的javascript库
一个JavaScript库,用于支持触摸屏设备上的触摸(尤其是多点触摸)手势_JavaScript_下载.zip
一个Android应用程序示例,实现多点触摸的手势识别。
interact.js实现JavaScript拖放,调整大小和多点触摸惯性和捕捉手势
interact.js是一款支持元素惯性拖放和多点触摸手势的js插件。该插件支持在桌面设备和移动手机设备中拖放元素,拖动结束时带有惯性效果。并且支持移动设备的多点触摸手势。
NULL 博文链接:https://edison87915.iteye.com/blog/1849936
服务器是一个node.js应用程序,该应用程序处理提供的contact.js并处理发送方和接收方之间的websocket通信。 发射器是您用来传送触摸事件的对象。 这可能是您的手机或平板电脑。 您可能会使用受websocket支持的...
GNOME Shell X11Gestures扩展程序通过此扩展程序在X11上启用GNOME Shell多点触摸手势。 必须单独安装Touchégg,然后再安装。GNOME Shell X11Gestures扩展使用此扩展在X11上启用GNOME Shell多点触摸手势。 Touché...
Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。浏览器要求ie10以上版本,演示地址:http://www.jq22.com/jquery-info552
android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果(仿腾讯,新浪),这里面实现多少会有不足之处,大家在运用的时候根据需求自行调整,大多都是多数图片左右切换实现,这个大家可以自定义ViewGroup...
多点触控Javascript javascript中触摸事件的演示和演示演示: 在设备上加载这些首先使用这些文件在本地机器上运行服务器克隆这个 repo cd到文件夹运行... python -mSimpleHTTPServer 现在连接设备转到chrome://...
A JavaScript implementation of the TUIO protocol for multitouch and tangible interaction for NodeWebkit (nw).
内容提要 《HTML5触摸界面设计与开发》专注于触摸界面的开发,内容的结构和优化网站的...11.1 了解多点触摸的限制和支持情况 180 11.2 处理多点触摸 180 11.3 处理双指缩放 185 11.4 总结 195 11.5 项目 195
一种react组件,可让您使用移动设备上的多点触摸手势以及桌面设备上的鼠标事件\滚轮来缩放和拖动任何DOM元素。 基于此模块, 组件功能: :crystal_ball: 简单的。 易于使用; :red_apple: 它适用于移动触摸手势和...
多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入。 不得不在移动设备上进行的测试有可能会拉长你的开发周期,因为你所做的每项改变都需要提交代码到服务器上,接着再加载到设备上。...
PinchZoom是一个Javascript库,提供用于在任何DOM元素上进行缩放的多点触摸手势。 安装 使用。 通过直接链接到。 确保指定版本。 从源编译。 :alien_monster: 用法 要求 没有依赖关系,使用香草JS构建。 现代的...
具有惯性和对齐功能JavaScript拖放,调整大小和多点触摸手势,适用于现代浏览器(以及IE9 +)。 功能包括: 惯性和折断 多点触控,同时互动 跨浏览器和设备,支持桌面和移动版本的Chrome,Firefox和Opera以及...
继续... GNOME Shell X11手势扩展 使用此扩展在X11上启用GNOME Shell多点触摸手势。 必须单独安装。 安装并...