`

11个处理触摸事件和多点触摸的JS库(转载)

阅读更多

 

11个处理触摸事件和多点触摸的JS库(转载)

触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作。要开发支持触摸屏设备的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

英文出自:11 Multi-touch and Touch events Javascript libraries

译文来自:oschina

 

 

分享到:
评论

相关推荐

    Hammerjs实现多点触摸手势的javascript库

    Hammer.js是一个强大的JavaScript库,专门用于处理这些多点触摸事件,为开发者提供了丰富的手势识别功能,使得在Web应用中实现类似原生应用的交互体验变得轻而易举。 ### 1. Hammer.js核心概念 Hammer.js的核心...

    Android多点触摸示例源代码

    1. 在处理多点触摸时,要确保正确处理`ACTION_POINTER_DOWN`和`ACTION_POINTER_UP`事件,它们分别表示有新的手指按下和抬起。 2. 避免在处理多点触摸时出现性能问题。过多的计算可能会导致UI卡顿,确保优化手势识别...

    一个JavaScript库,用于支持触摸屏设备上的触摸(尤其是多点触摸)手势_JavaScript_下载.zip

    本资源提供了一个专门针对触摸屏设备的JavaScript库,它优化了对触摸事件和多点触摸手势的支持,使开发者能够更轻松地构建触摸友好的用户界面。这个库被称为“Gesture”,它是一个强大的工具,能够帮助开发者在移动...

    TUIO多点触摸调试工具

    1. **模拟多点触摸**: 用户可以在软件界面上模拟多个触摸点,模拟不同的触摸事件,如单点触摸、双指缩放、旋转等。 2. **自定义参数**: 开发者可以根据需求调整模拟触摸的参数,例如触点的速度、加速度、角度等,以...

    JavaScript触摸与手势事件

    在事件处理方面,需要了解Safari如何处理触摸、多点触控和手势事件。例如,Safari处理单指事件、双指事件、表单和文档事件,使元素可点击,处理多点触控事件,以及手势事件。开发者需要知道如何防止默认行为,处理...

    在网页中实现多点触摸EightMedia

    1. **Hammer.js库**:Hammer.js是一个轻量级的JavaScript库,专为触摸设备设计,用于处理触摸事件和手势识别。它支持各种常见的手势,如点击、滑动、双击、捏合等,并且可以自定义新的手势。 2. **多点触摸手势**:...

    interactjs实现JavaScript拖放调整大小和多点触摸惯性和捕捉手势

    交互库interact.js是JavaScript开发中的一个强大工具,专门用于实现拖放、调整大小和处理多点触摸事件,包括惯性、捕捉手势等高级功能。它使得在网页上创建交互式元素变得更加简单和灵活,尤其适合开发需要动态操作...

    支持元素惯性拖放和多点触摸手势的js插件

    总的来说,`interact.js`是网页交互设计的一个强大工具,它提供的元素拖放和多点触摸手势支持,为创建富有动态感和沉浸式的用户界面提供了坚实的基础。无论是在桌面还是移动设备上,它都能让网页的交互体验更加生动...

    手机触摸屏事件

    在提供的代码片段中,我们可以看到如何监听和处理`touchstart`和`touchmove`事件: ```javascript // touchstart事件处理器 function touchStartFunc(e) { // 阻止默认行为 e.preventDefault(); var touch = e....

    JS中的触摸事件1

    JavaScript中的触摸事件(Touch Events)是为移动设备设计的,用于处理用户与触摸屏的交互。与传统的鼠标事件相比,触摸事件提供了更丰富的信息,能够处理多点触控。本篇主要探讨`touchstart`, `touchmove`, `...

    javascript开发移动端app网站-处理手机手势,手指触摸事件.zip

    在JavaScript开发移动端应用程序时,尤其是构建手机App网站,理解和处理手机手势及手指触摸事件是至关重要的。这些事件使得用户能够通过手机屏幕上的直观交互来控制和操作应用,从而提供更优秀的用户体验。以下是对...

    tuio(TUIO协议JavaScript实现,用于NodeWebkit(nwjs)的多点触摸和切实交互-源码)

    A JavaScript implementation of the TUIO protocol for multitouch and tangible interaction for NodeWebkit (nw).

    simple-multitouch:简单的 JavaScript 多点触控手势识别演示

    总的来说,"simple-multitouch"是一个帮助开发者轻松集成多点触控手势的JavaScript工具,它通过封装复杂的触摸事件处理,降低了多点触控应用的开发难度。通过理解和使用这个库,开发者可以为触摸设备上的Web应用添加...

    使用此扩展在X11上启用GNOMEShell多点触控手势_JavaScript_下载.zip

    1. 安装必要的依赖,如libinput-gestures,这是一个处理多点触控事件的库。 2. 将压缩包解压到适当的目录,例如`~/.local/share/gnome-shell/extensions/`。 3. 使用`gnome-shell-extension-tool`或在GNOME Tweak ...

    Cocos2D-X开发学习笔记-触屏事件使用示例

    开发者可以通过重写`Layer`或`Scene`的触摸事件回调函数来捕获和处理这些事件。 一、单点触摸事件处理 1. `onTouchesBegan`: 当用户首次触摸屏幕时,这个回调会被调用。参数是一个`std::vector*>`类型的数组,包含...

    图片手势滑动,多点触摸可以放大缩小

    在移动设备和现代网页设计中,图片手势滑动和多点触摸功能已经成为用户交互的核心部分。这些技术使得用户可以通过简单的手指动作来查看、导航和操纵图像,极大地提升了用户体验。下面我们将详细探讨这一主题。 首先...

    hammer.js之上的多点触控手势糖层_JavaScript_下载.zip

    Hammer.js 是一个轻量级的JavaScript库,专为触摸设备设计,用于处理各种手势操作,如滑动、旋转、缩放等。它为开发者提供了一种简单的方式来添加多点触控功能到他们的Web应用或网站中,使得触摸交互更加直观和用户...

    使用此扩展在X11上启用GNOME Shell多点触摸手势-JavaScript开发

    GNOME Shell X11Gestures扩展程序通过此扩展程序在X11上启用GNOME Shell多点触摸手势。 必须单独安装Touchégg,然后再安装。GNOME Shell X11Gestures扩展使用此扩展在X11上启用GNOME Shell多点触摸手势。 Touché...

    touchHandle:js 触摸事件处理程序

    在JavaScript编程中,触摸事件处理程序(Touch Events)是一种用于响应用户在触摸设备(如智能手机或平板电脑)上的触摸操作的技术。"touchHandle"可能是针对这个领域的特定实现或库,旨在帮助开发者更方便地处理...

Global site tag (gtag.js) - Google Analytics