手机端&PC端鼠标和手势交互异同辨析（一）

Posted 2023-04-17

参考技术A 移动端相较于PC端的交互动作，即手势操作相较于鼠标键盘输入设备操作，是存在相当大的不同的。在ios系统出现之前的时代，是单点触控的电容屏和触控笔和手机端物理键盘对PC端的粗暴移植和复刻，有的移动端设备甚至复制了PC端笨重的QWERTY键盘，那时移动端的输入设备基本和PC端是可以一一对应的。

但在乔布斯主导的iOS系统和手势操作系统出现后，我们已经无法简单把移动端的手势操作与PC端输入设备简单对应了。移动端设备的交互方式也从此开始与PC端的交互方式分道扬镳，渐行渐远。

我们先来回顾一下PC端鼠标针对UI控件的几个主要交互动作：

有时候也被称为“MouseOver+MouseOut”，PC端用户可以用鼠标指针移过UI控件时UI控件的交互反馈来推测UI控件的操作方式。某些位于某种UI控件之上的Hover动作可能会让鼠标指针产生不同形态的变化，如链接会变为手型，载入新内容会变为沙漏，可操作文字内容变为工字梁，Q&A变为问号等等，鼠标指针形态的改变是对当前悬停位置内容的一种指示。

有些UI控件本身会对鼠标的Hover行为产生反馈，此时不光鼠标指针会发生相应的形态变化，UI控件本身也会根据预先定义产生不同形态的变化。熟悉CSS的朋友可能记得文字链接的几种定义：:link; :visited; :hover; active; 其中的hover就是针对鼠标悬停于自身时自己的样式呈现。

Hover交互的用户端触发条件：移动鼠标指针。

有时候也被称为“Active”、“Action”、“MouseDown+MouseUp”，是鼠标点击UI控件后释放点击的一套交互行为，这个过程中用户点击和释放的坐标点是一致的，没有移动行为。系统在判定用户的交互动作是“Click”动作后，提供用户点击的UI控件本身应该提供的交互反馈或系统层级反馈。

Click交互一定是发生在Hover交互之后的，Hover是Click的前置动作，因为不把鼠标指针悬浮到UI控件之上，是无法完成对目标UI控件的点击行为的。

Click交互的用户端触发条件：移动鼠标指针Hover目标UI控件，然后按压物理按键。

PC端虽然判断鼠标点击的事件监听机制是同样的，但无论是苹果的OSX系统还是微软的Windows系统，都默认把鼠标右键点击交互反馈留给了ContextMenu，即系统菜单，此时系统或应用收回了对右键反馈的控制权，鼠标右键点击激活的是系统菜单，用户需要再次点击菜单选项来对当前UI控件进行更多操作。

Right Click交互的用户端触发条件：移动鼠标指针Hover目标UI控件，然后按压物理按键右键。

Tap交互也叫Soft-touch，中文一般称为“轻敲”，是鼠标指针Hover于某UI界面元素后，在鼠标操作区（或触控板外设）上快速轻敲以实现与界面元素间的互动，普通的windows系统鼠标可能不支持此操作。

Tap交互针对的UI界面元素一般是界面级控件，如操作区放大缩小、进入程序选择界面等。

Tap触发条件：Hover于界面元素，轻敲鼠标操作区，没有物理按压行为。

Drag交互中文一般称之为“拖拽”，是鼠标指针Hover于某UI控件后，用鼠标按键或其他方式触发UI控件进入拖拽状态后，通过移动鼠标指针的位置来将UI控件拖移至指定位置，然后通过松开按键或其他方式解除控件拖拽状态。

拖拽状态需要UI控件本身支持拖拽功能才能激活。所以有时候通过鼠标指针的变化来指示指定UI控件是可拖拽的。

拖拽状态触发条件：Hover于界面元素，按住鼠标按键或快捷键激活拖拽状态，拖拽完成后解除拖拽状态。

Scroll交互是指鼠标指针Hover于指定界面后，用鼠标滚轮或轻划动作来实现界面内容滚动显示。

Scroll状态触发条件：Hover于界面元素，滚动鼠标滚轮或上下轻划鼠标操作区。

这个动作中文一般称为“平移”，是指鼠标指针悬停在某个UI控件上方时，可以通过在鼠标二维平面和屏幕之间建立一种映射关系，来实现在UI空间内的卷屏效果。

这个动作是Mac的OSX等操作系统支持的苹果专用鼠标提供的基于鼠标Hover交互的交互方式，如果我们把触摸板外设也作为鼠标的变体和延伸的话，笔记本的触摸板也提供这个交互方式。

Pan交互触发条件：Hover于指定控件，二维平面内轻划鼠标操作区实现。

Zoom交互分为放大（Zoom In）和缩小（Zoom Out）操作，一般是鼠标指针Hover于指定界面或UI控件，通过鼠标按键或快捷键激活Zoom状态，缩放完成后，再通过释放按键解除zoom状态。

Zoom交互触发条件：Hover于指定控件，通过鼠标按键或快捷键激活Zoom状态，二维平面内轻划鼠标操作区实现Zoom效果，然后释放按键解除Zoom状态。

以上就是PC端鼠标能够实现的主要交互行为。下一篇我们继续分析PC端鼠标交互和移动端手势交互的异同。

移动端事件

前言

如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢??
诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，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.getElementById(‘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[i]; 
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硬件上测试了Android 2.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[i]; 
console.log(‘touched ‘ + touch.identifier); 
} 
}, false);

但下面的代码则不会：

var objs = [obj1, obj2]; 
for (var i = 0; i < objs.length; i++) { 
var obj = objs[i]; 
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。

转自：http://select.yeeyan.org/view/213582/202991