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 1044Internet Explorer 10 和使 ... -
IE11开发人员工具:UI响应工具详解
2014-02-27 18:33 942我讨厌debug,相信也没多少开发者会喜欢。但是当代码出 ... -
IE11开发人员工具:内存分析工具详解
2014-02-27 18:32 1458上篇我们跟大家介绍 ... -
E6与location.hash和Ajax历史记录 (转载)
2014-02-26 12:23 560为了在IE6中改变hash来保留历史记录实现ajax的前进 ... -
MIME Types(转载)
2013-12-31 10:20 649MIME Types - Complete List ... -
iframe历史记录问题(转载)
2013-10-17 10:21 1346在做页面统计的时候 ... -
前端类库精选(转)
2013-05-11 00:57 0优秀的前端类库,自己平时遇见了,这里Mark一下。 1、m ... -
10个chrome console实用小技巧(转)
2013-05-09 10:56 10711. 基本输出 让我们先从最常见的console.l ... -
CSS3那些不为人知的高级属性(转)
2013-04-19 13:35 958原文:CSS的未来:一些 ... -
JavaScript 时间、格式、转换及Date对象总结(转)
2013-04-10 14:49 719悲剧的遇到问题,从前台得到时间,“Tue Jan 29 16 ... -
如何制作一个可及性强(accessible)的网页弹框(转载)
2013-04-02 16:18 810英文原文:Making an accessib ... -
JavaScript MVC js也mvc(转载)
2013-03-16 23:59 692JavaScript MVC 中文:http://blog ... -
SUBLIME TEXT 2 设置文件详解
2012-12-27 11:21 1063Sublime Text 2是那种让人会一眼就爱上的编辑 ... -
两个按位非操作与Math.floor操作(译)
2012-12-10 18:17 959位操作符在我们编码过程中是容易被遗忘的,可能更多的源于我们 ... -
img中src为空的影响
2012-11-26 23:32 0这是我们经常能遇到的代码,可以直接用html标签或者Java ... -
IE6下position定位子元素溢出,父元素被撑开的解决思路。(转)
2012-11-13 18:04 1649在一些被常规的页面布局当中,我们常常需要通过positi ... -
chrome developer tool 调试技巧(转)
2012-11-12 13:16 871这篇文章是根据目前 chrome 稳定版(19.0.10 ... -
你清楚jquery是如何清除ajax缓存的吗?(转)
2012-11-11 11:19 1057大家都知道万恶的IE在ajax中往往只读取第一次ajax ... -
是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率 In JavaScript(转)
2012-11-10 23:33 726随着WebApp突飞猛进的发展,Javascript写的 ... -
Javascript基础
2012-11-10 23:25 0原文:http://bonsaiden.githu ...
相关推荐
Hammer.js是一个强大的JavaScript库,专门用于处理这些多点触摸事件,为开发者提供了丰富的手势识别功能,使得在Web应用中实现类似原生应用的交互体验变得轻而易举。 ### 1. Hammer.js核心概念 Hammer.js的核心...
1. 在处理多点触摸时,要确保正确处理`ACTION_POINTER_DOWN`和`ACTION_POINTER_UP`事件,它们分别表示有新的手指按下和抬起。 2. 避免在处理多点触摸时出现性能问题。过多的计算可能会导致UI卡顿,确保优化手势识别...
本资源提供了一个专门针对触摸屏设备的JavaScript库,它优化了对触摸事件和多点触摸手势的支持,使开发者能够更轻松地构建触摸友好的用户界面。这个库被称为“Gesture”,它是一个强大的工具,能够帮助开发者在移动...
在事件处理方面,需要了解Safari如何处理触摸、多点触控和手势事件。例如,Safari处理单指事件、双指事件、表单和文档事件,使元素可点击,处理多点触控事件,以及手势事件。开发者需要知道如何防止默认行为,处理...
1. **Hammer.js库**:Hammer.js是一个轻量级的JavaScript库,专为触摸设备设计,用于处理触摸事件和手势识别。它支持各种常见的手势,如点击、滑动、双击、捏合等,并且可以自定义新的手势。 2. **多点触摸手势**:...
交互库interact.js是JavaScript开发中的一个强大工具,专门用于实现拖放、调整大小和处理多点触摸事件,包括惯性、捕捉手势等高级功能。它使得在网页上创建交互式元素变得更加简单和灵活,尤其适合开发需要动态操作...
总的来说,`interact.js`是网页交互设计的一个强大工具,它提供的元素拖放和多点触摸手势支持,为创建富有动态感和沉浸式的用户界面提供了坚实的基础。无论是在桌面还是移动设备上,它都能让网页的交互体验更加生动...
在提供的代码片段中,我们可以看到如何监听和处理`touchstart`和`touchmove`事件: ```javascript // touchstart事件处理器 function touchStartFunc(e) { // 阻止默认行为 e.preventDefault(); var touch = e....
JavaScript中的触摸事件(Touch Events)是为移动设备设计的,用于处理用户与触摸屏的交互。与传统的鼠标事件相比,触摸事件提供了更丰富的信息,能够处理多点触控。本篇主要探讨`touchstart`, `touchmove`, `...
在JavaScript开发移动端应用程序时,尤其是构建手机App网站,理解和处理手机手势及手指触摸事件是至关重要的。这些事件使得用户能够通过手机屏幕上的直观交互来控制和操作应用,从而提供更优秀的用户体验。以下是对...
1. 安装必要的依赖,如libinput-gestures,这是一个处理多点触控事件的库。 2. 将压缩包解压到适当的目录,例如`~/.local/share/gnome-shell/extensions/`。 3. 使用`gnome-shell-extension-tool`或在GNOME Tweak ...
A JavaScript implementation of the TUIO protocol for multitouch and tangible interaction for NodeWebkit (nw).
开发者可以通过重写`Layer`或`Scene`的触摸事件回调函数来捕获和处理这些事件。 一、单点触摸事件处理 1. `onTouchesBegan`: 当用户首次触摸屏幕时,这个回调会被调用。参数是一个`std::vector*>`类型的数组,包含...
在移动设备和现代网页设计中,图片手势滑动和多点触摸功能已经成为用户交互的核心部分。这些技术使得用户可以通过简单的手指动作来查看、导航和操纵图像,极大地提升了用户体验。下面我们将详细探讨这一主题。 首先...
总的来说,"simple-multitouch"是一个帮助开发者轻松集成多点触控手势的JavaScript工具,它通过封装复杂的触摸事件处理,降低了多点触控应用的开发难度。通过理解和使用这个库,开发者可以为触摸设备上的Web应用添加...
Hammer.js 是一个轻量级的JavaScript库,专为触摸设备设计,用于处理各种手势操作,如滑动、旋转、缩放等。它为开发者提供了一种简单的方式来添加多点触控功能到他们的Web应用或网站中,使得触摸交互更加直观和用户...
GNOME Shell X11Gestures扩展程序通过此扩展程序在X11上启用GNOME Shell多点触摸手势。 必须单独安装Touchégg,然后再安装。GNOME Shell X11Gestures扩展使用此扩展在X11上启用GNOME Shell多点触摸手势。 Touché...
在JavaScript编程中,触摸事件处理程序(Touch Events)是一种用于响应用户在触摸设备(如智能手机或平板电脑)上的触摸操作的技术。"touchHandle"可能是针对这个领域的特定实现或库,旨在帮助开发者更方便地处理...
服务器是一个node.js应用程序,该应用程序处理提供的contact.js并处理发送方和接收方之间的websocket通信。 发射器是您用来传送触摸事件的对象。 这可能是您的手机或平板电脑。 您可能会使用受websocket支持的...