Touch.js 百度云的移动设备手势识别与事件库
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方法
});
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论