Touch.js 百度云的移动设备手势识别与事件库

Question

Touch.js 是移动设备上的手势识别与事件库，由百度云 Clouda 团队维护，也是在百度内部广泛使用的开发工具，Touch.js 的代码已托管于 github 并开源，希望能帮助国内更多的开发者学习和开发出优秀的 App 产品。

Touch.js 手势库专为移动设备设计，请在 Webkit 内核浏览器中使用。

特点

• 无侵入设计，与现有代码与框架共存
• 原生出色的加速度感知与缓动效果，优秀的单指旋转手势
• 基于原生事件，支持事件代理，性能更好
• 极简的 API，秒速上手，玩转手势

安装

极速CDN

<script src="http://code.baidu.com/touch-0.2.14.min.js"></script>

也可以通过下载 Touch.js 的原文件，你可以访问 Touch.js 的 Github 地址获取到完整的文件。

包管理器

Touchjs 已发布至多种包管理器，可以通过以下包管理器来管理 Touchjs:

NPM

• 安装: npm install touchjs
• 更新: npm update touchjs
• 卸载: npm uninstall touchjs

spm

• 安装: spm install touchjs

Bower

• 安装: bower install touchjs
• 更新: bower update touchjs
• 卸载: bower uninstall touchjs

Component

• 安装: conponent install brandnewera/touchjs

示例代码

你可以查阅下面的代码看看是如何工作的

//swipe example
touch.on('.target', 'swipeleft swiperight', function(ev){
    console.log("you have done", ev.type);
});

Rotate

利用startRotate, 单指触发滚动事件

//rotation
var angle = 0;
touch.on('#target', 'touchstart', function(ev){
    ev.startRotate();
    ev.preventDefault();
});

touch.on('#target', 'rotate', function(ev){
    var totalAngle = angle + ev.rotation;
    if(ev.fingerStatus === 'end'){
        angle = angle + ev.rotation;
    }
    this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)';
});

Scale

双指放大与缩小目标。

var target = document.getElementById("target");
target.style.webkitTransition = 'all ease 0.05s';

touch.on('#target', 'touchstart', function(ev){
    ev.preventDefault();
});

var initialScale = 1;
var currentScale;

touch.on('#target', 'pinchend', function(ev){
    currentScale = ev.scale - 1;
    currentScale = initialScale + currentScale;
    currentScale = currentScale > 2 ? 2 : currentScale;
    currentScale = currentScale < 1 ? 1 : currentScale;
    this.style.webkitTransform = 'scale(' + currentScale + ')';
    log("当前缩放比例为:" + currentScale + ".");
});

touch.on('#target', 'pinchend', function(ev){
    initialScale = currentScale;
});

Tap & Hold

识别tap、doubletap和hold事件。

touch.on('#target', 'hold tap doubletap', function(ev){
    //console.log(ev.type);
});

Swipe

向左、向右swipe滑动

touch.on('#target', 'touchstart', function(ev){
    ev.preventDefault();
});

var target = document.getElementById("target");
target.style.webkitTransition = 'all ease 0.2s';

touch.on(target, 'swiperight', function(ev){
    this.style.webkitTransform = "translate3d(" + rt + "px,0,0)";
    log("向右滑动.");
});

touch.on(target, 'swipeleft', function(ev){
    log("向左滑动.");
    this.style.webkitTransform = "translate3d(-" + this.offsetLeft + "px,0,0)";
});

Drag

抓取并移动目标

touch.on('#target', 'touchstart', function(ev){
    ev.preventDefault();
});

var target = document.getElementById("target");
var dx, dy;

touch.on('#target', 'drag', function(ev){
    dx = dx || 0;
    dy = dy || 0;
    log("当前x值为:" + dx + ", 当前y值为:" + dy +".");
    var offx = dx + ev.x + "px";
    var offy = dy + ev.y + "px";
    this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";
});

touch.on('#target', 'dragend', function(ev){
    dx += ev.x;
    dy += ev.y;
});

Touch

当前为原生事件: mousemove

touch.on('#target', 'touchstart touchmove touchend', function(ev){
    console.log(ev.type);
});

版本兼容

与0.2.6及之前的touch.js兼容问题

兼容原因

0.2.6 及之前的 touch.js 不支持事件代理机制，而新的 touch.js 通过手势识别，事件冒泡及原生的事件对象，提供事件代理机制和自定义事件的能力，从而极大提升性能。原有的 stopPropagation 会阻止原生事件冒泡，从而使手势识别失效，因此，需要手动删除/注释 stopPropagation 语句。麻烦各位根据自己项目的实际情况，选择性升级 touch.js。

兼容方法

删除/注释所有绑定中的 stopPropagation 方法

touch.on('#rotation .target', 'touchstart', function(ev){ ev.startRotate();
    ev.originEvent.preventDefault(); 
    //ev.originEvent.stopPropagation();
    //注释掉或者删掉stopPropagation方法
});

相关链接

• 项目地址：http://touch.code.baidu.com/
• Github地址：https://github.com/Clouda-team/touchjs