javascript——touch事件
前言
诸如智能手机和平板电脑一类的移动设备通常会有一(capacitive touch-sensitivescreen),以捕捉用户的手指所做的交互。随着移动网络的发展,其能够支持越来越复杂的应用,web开发者需要一种方法来处理这些事件。例如,几乎所有的快节奏游戏都需要玩家一次按下多个按钮,这种方式,在触摸屏情况下,意味着多点触摸。
Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。
在本文深入研究iOS和Android设备提供的触摸事件API,探索一下可以构建哪些类型的应用,给出一些最佳做法,并论及一些使得可触控应用(touch-enabled application)的开发变得更加容易的有用技术。
触摸事件
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:
1. touchstart:手指放在一个DOM元素上。
2. touchmove:手指拖曳一个DOM元素。
3. touchend:手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表:
1. touches:当前位于屏幕上的所有手指的一个列表。
2. targetTouches:位于当前DOM元素上的手指的一个列表。
3. changedTouches:涉及当前事件的手指的一个列表。
例如,在一个touchend事件中,这就会是移开的手指。
这些列表由包含了触摸信息的对象组成:
1. identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。
2. target:DOM元素,是动作所针对的目标。
3. 客户/页面/屏幕坐标:动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle:画出大约相当于手指形状的椭圆形。
可触控应用
touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势,比如说捏缩放、旋转等待。 下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素:复制代码
var obj = document.getElementByIdx_x_x_x_x_x_x('id');
obj.addEventListener('touchmove', function(event)
{ // 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1)
{
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX + 'px';
obj.style.top = touch.pageY + 'px';
}
}, false);
下面是一个示例,该例子显示了屏幕上当前所有的触点,它的作用就是用来感受一下设备的响应性。
// 设置画布并通过ctx变量来暴露上下文复制代码
canvas.addEventListener('touchmove',
function(event) {
for (var i = 0; i < event.touches.length; i++) {
var touch = event.touches;
ctx.beginPath();
ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
ctx.fill();
ctx.stroke();
}
}, false);
演示
到处都有着许多有意思的多点触摸演示,比如说这个由Paul Irish和其他人实现的基于画布的绘画演示。
还有Browser Ninja,一个技术演示,是一个使用了CSS3的转换、过渡和画布的Fruit Ninja克隆。
最佳做法
阻止缩放
缺省的多点触摸设置不是特别的好用,因为你的滑动和手势往往与浏览器的行为有关联,比如说滚动和缩放。
要禁用缩放功能的话,使用下面的元标记设置你的视图区(viewport),这样其对于用户来说就是不可伸缩的了:
content="width=device-width, initial-scale=1.0, user-scalable=no">
看看这篇关于移动HTML 5的文章,了解更多关于视图区设置的信息。
阻止滚动
一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱,但要禁用它很容易。
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
细心渲染
如果你正在编写的多点触控应用涉及了复杂的多指手势的话,要小心地考虑如何响应触摸事件,因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子,你可以在有触摸输入的时候就立刻进行绘制:
canvas.addEventListener('touchmove', function(event) {
renderTouches(event.touches);
},
不过这一技术并不是要随着屏幕上的手指个数的增多而扩充,替代做法是,可以跟踪所有的手指,然后在一个循环中做渲染,这样可获得更好的性能:
var touches = []
canvas.addEventListener('touchmove', function(event) {
touches = event.touches;
}, false);
// 设置一个每秒60帧的定时器
timer = setInterval(function() {
renderTouches(touches);
}, 15);
提示:setInterval不太适合于动画,因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数,基于性能和电池工作时间原因,这是一个更好的选择。一但浏览器提供了对该函数的支持,那将是首选的处理事情的方式。
使用targetTouches和changedTouches
要记住的一点是,event.touches是与屏幕接触的所有手指的一个数组,而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。
最后一点,因为你是在为移动设备做开发,因此你应该要留心移动的最佳做法,这些在Eric Bidelman的文章中有论及,以及要了解这一W3C文档。
设备支持
遗憾的是,触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息,其中包括哪些事件是支持的,以及 touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android2.3.3,在Xoom上测试了Android 3.0.1,以及在iPad和iPhone上测试了iOS 4.2。
简而言之,所有被测试的浏览器都支持touchstart、touchend和touchmove事件。
规范提供了额外的三个触摸事件,但被测试的浏览器没有支持它们:
1. touchenter:移动的手指进入一个DOM元素。
2. toucheleave:移动手指离开一个DOM元素。
3. touchcancel:触摸被中断(实现规范)。
被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过,被测试的浏览器没有支持radiusX、radiusY或是rotationAngle属性,这些属性指明触摸屏幕的手指的形状。在一次touchmove期间,事件大约一秒钟触发60次,所有的被测试设备都是这样。
Android 2.3.3 (Nexus)
Android的Gingerbread浏览器(在Nexus One和Nexus S上测试)不支持多点触摸,这是一个已知的问题。
Android 3.0.1 (Xoom)
Xoom的浏览器对多点触摸有一个基本的支持,不过只能是在单个的DOM元素上起作用。浏览器不能正确响应同时发生在不同DOM元素上的两处触摸,换句话说,下面的代码会对两个同时发生的触摸的给出反应:复制代码
obj1.addEventListener('touchmove', function(event) {
for (var i = 0; i < event.targetTouches; i++) {
var touch = event.targetTouches;
console.log('touched ' + touch.identifier);
}
}, false);
但下面的代码则不会:复制代码
var objs = [obj1, obj2];
for (var i = 0; i < objs.length; i++) {
var obj = objs;
obj.addEventListener('touchmove', function(event) {
if (event.targetTouches.length == 1) {
console.log('touched ' +
event.targetTouches[0].identifier);
}
}, false);
}
iOS 4.x (iPad, iPhone)
iOS设备完全支持多点触摸,能够跟踪多个手指,并在浏览器中提供一个非常敏感的触摸体验。
开发者工具
在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入。
不得不在移动设备上进行的测试有可能会拉长你的开发周期,因为你所做的每项改变都需要提交代码到服务器上,接着再加载到设备上。然后,一旦运行后,对应用也就没有太多的调试了,因为平板电脑和智能手机都很缺乏web开发者所用的工具。
这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸,触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话,比如说现代的App MacBook,那么多点触摸也可以被模拟。
单点触摸事件
如果你想在桌面上模拟单点触摸事件的话,试一下Phantom Limb,该程序在网页上模拟触摸事件并提供一只巨手来引导。
另外还有Touchable这一jQuery插件,该插件跨平台地统一了触摸和鼠标事件。
多点触摸事件
为了能够让你的多点触摸web应用在你的浏览器或是多点触摸控板(比如说Apple MacBook或是MagicPad)上起作用,我创建了这一个MagicTouch.js填充工具,其捕捉来自触控板的触摸事件,然后把它们转换成标准兼容的触摸事件。
1. 下载npTuioClient NPAPI插件并把它安装到~/Library/Internet Plug-Ins/目录下。
2. 下载这一Mac MagicPad的TongSeng TUIO应用并启动这一服务器。
3. 下载MagicTouch.js这一javascript库来基于npTuioClient回调模拟规范兼容的触摸事件
4. 以如下方式把magictouch.js脚本和npTuioClient插件包含到你的应用中:复制代码
< head>
...
<script src="/path/to/magictouch.js"
kesrc="/path/to/magictouch.js">< /script>
< /head>
< body>
...
< object id="tuio" type="application/x- tuio" style="width: 0px; height: 0px;">
Touch input plugin failed to load!
< /object>
< /body>
我只在Chrome 10上测试了这一方法,不过只要稍做调整它应该能够在其他的现代浏览器上工作。
如果你的计算机没有多点触摸输入的话,你可以使用其他的TUIO跟踪器,比如
说reacTIVision来模拟触摸事件。欲了解更多信息,请参阅TUIO项目页面。
需要注意的一点是,你的手势可以是和OS层面的多点触摸手势相同的。在OS X上,你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。
随着多点触摸功能逐渐得到跨移动浏览器的的广泛支持,我非常高兴地看到新的web应用充分利用了这一丰富的API。
javascript——touch事件的更多相关文章
- javascript touch事件
touchstart : 當手指觸摸屏幕時觸發:即使已經有一個手指放在了屏幕上也會觸發. touchmove : 當手指在屏幕上滑動時連續的觸發,在這個事件發生期間,商用preventDefault( ...
- javascript——touch事件介绍与实例演示
分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...
- [转]html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常 ...
- javaScript -- touch事件详解(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- 浅谈javascript的Touch事件
js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...
- javascript的Touch事件
js的touch事件,一般用于移动端的触屏滑动 $(function(){document.addEventListener("touchmove", _touch, false) ...
- UC浏览器中touch事件的异常记录
以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...
- 手持设备点击响应速度,鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
随机推荐
- JS保留两位小数 [转]
js保留2位小数toFixed(xxxx) var a = 9.39393; alert(a.toFixed()); alert(Number.toFixed(9.39393)); 返回的是9. 对于 ...
- SqlServer中decimal(numeric )、float 和 real 数据类型的区别[转]
decimal(numeric ) 同义,用于精确存储数值 float 和 real 不能精确存储数值 decimal 数据类型最 ...
- android捕获ListView中每个item点击事件
转自:http://www.cnblogs.com/pswzone/archive/2012/03/10/2389275.html package com.wps.android; import ...
- 33、多线程断点下载的实现&界面的更新
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- FZU 2214 Knapsack dp (转化背包)
就是一个背包裸题,由于物品的重量太大,开不了这么大的数组 所以转化一下,由于价值总和不大于5000,所以把价值看作重量,重量看作价值,那么就是同样的价值下,求一个最轻的重量 #include<c ...
- android 实现模拟按键
android 实现模拟按键方法一 通过Runtime实现,代码如下: try { String keyCommand = "input keyevent " + KeyEvent ...
- CSLA.NET 简介
CSLA.NET 据说在国外用的很多,国内介绍这个框架的文章目前网络上能找到的比较早,大多是早期的一些版本的版本的介绍.目前最新版的4.5.6 .版本的整体架构已经有了很大的变化.拟开一个系列,结合〈 ...
- bzoj 2656 [Zjoi2012]数列(sequence)(高精度)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2656 [题意] 计算大数递推式 [思路] 高精度 [代码] #include<c ...
- tRNAscan-SE
tRNAscan-SE是一款可以在基因组上扫描tRNA的序列,也就是说你给定一组基因序列(fasta数据格式),可以用这个软件去预测这个序列是不是tRNA.具体的实现原理,我不搞生物,所以也就不太明白 ...
- ubuntu 的 apt-get update 出现404错误时,ubuntu 版本也 end of life 了的解决方案
xmodulo.com/how-to-fix-apt-get-update-error-on-ubuntu.html 如果是依赖没找到,可以用 sudo apt-get install -f 先补齐依 ...