2017最新移动端交互开发入门到精通
在移动设备中，几乎所有的操作都和触摸有关，而基于这一特性，近年来在移动端中也兴起了一些较为特别的交互方式。用手指在屏幕上“刮奖”就是其中的一个非常典型的例子，它不仅需要前端设计师能够熟悉触摸手势的控制方法，还需要设计师掌握一定的图像处理技巧。接下来我们就将通过制作一个简单的刮奖案例，来了解HTML5中触摸操作的相关知识。1. 触摸交互操作基础——Touch与Click的区别
在移动设备上，人们的交互方式不再是键盘和鼠标，而是手指。因此，对应的移动端页面的交互方式也会与桌面端有所不同。 在桌面端，为某个提交按钮制作点击功能，可以使用如下的JavaScript代码： var submit = document.getElementById("submit");submit.onclick = function(){ // 功能代码};
以上代码使用了onclick事件来对应鼠标的点击行为。然而，在iPhone这样的移动端测试时，我们会发现onclick事件有大约半秒的延迟，这是因为iOS系统需要等待一段时间来判断用户是点击还是拖动。要使得用户在移动端的交互更为流畅，则需要使用到Touch事件，使页面得知用户的交互行为不是一次点击，而是一次“触摸”。代码如下：
submit.addEventListener("touchstart", submitForm);function submitForm(){ // 功能代码}
以上代码使用了addEventListener方法为submit元素注册了事件侦听，侦听的事件为touchstart，触发的函数为submitForm()。也就是说，当用户在移动设备中触摸这个submit按钮时，就会触发按钮的touchstart事件，并执行submitForm函数。 在触发touchstart事件时，也会同时产生一个event对象，在这个对象中包括了触摸行为的各种信息，如我们可以用以下代码输出触摸点的个数： function submitForm(event){ submit.innerHTML = "触摸点个数为" + event.touches.length;}
我们也可以获取到触摸点的x、y位置属性，其属性名分别为pageX和pageY。以下代码将输出第一个触摸点的x坐标：
function submitForm(event){ submit.innerHTML = "第一个触摸点的X位置" + event.touches[0].pageX;}
除touchstart外，在HTML5中与触摸相关的事件还包括touchmove和touchend，前者是在手指拖曳页面元素的过程中不断触发，而后者是手指从一个页面元素上移开时触发。 除touch事件外，在iOS设备中还提供了gesture事件，即多指操作。可以这么理解，当用户将一根手指放到按钮上时，此时触发了touch，而此时将第二根手指也放到按钮上时，就触发了gesture（手势）事件。我们将在随后的教程中对手势操作进行详细讲解。 在了解了触摸事件基础知识后，接下来，我们将使用touch时间来制作“刮奖”效果。 2. HTML素材准备——准备好HTML代码、必要的CSS样式和素材文件3. 利用触摸事件实现刮奖效果——编写JavaScript代码
4. 案例收尾——一些需要考虑的细节
| 
/1 
