转至元数据结尾

移动端web开发，touch的应用是不可避免的，下面我就分享一下我再开发中的收获和学习的一些心得

一、什么是touch

touch是一种针对移动触屏设备的一种交互形式。早期的ios为了向开发人员提供一些特殊信息，新增了一些新的事件，随着安卓的webkit的出现这些事件已经成为标准化。

touchstart：当手指触摸屏幕是触发，即使是已经有一个手指在屏幕上。

touchmove: 当手指在屏幕上滑动时连续触发，在这个时期可以使用event.preventDefault()阻止屏幕滚动。

touchend: 当手指离开屏幕时触发。

touchcancel: 当系统停止跟踪触摸事件是触发。

二、touch事件对象

touch事件的事件对象和其他事件很是相似拥有一些dom属性，但是它也有一些专门用来跟踪触屏事件的一些属性。

1.touchs属性：表示当前跟踪的触摸操作的touch对象的数组。（其他的在这里不做介绍）

2.每个touch对象都包含下列属性（只介绍重点的）

clientX:触摸目标在视口中的X坐标

clientY：触摸目标在视口中的Y坐标

pageX: 触摸目标在页面中的X坐标

pageY: 触摸目标在；页面中的Y坐标

screenX: 触目坐标在屏幕中的X坐标

screenY: 触摸目标在屏幕中的Y坐标

target：触摸的dom节点目标

三、touch的应用与注意事项

1.获取滑动距离

2.target特性

MouseEvent的target始终指向cursor所指向的元素，TouchEvent的target只是指向touch start的时候所接触的元素，即使这个dom被删除掉，这样如果当你在touch move某些元素，而其中某个dom有可能在移动中被删除就会出现很诡异的问题

解决方案：直接使用touched element的target来添加touch move事件

element.addEventListener('touchstart', function(event) {

event.target.addEventListener('touchmove', onMove);

event.target.addEventListener('touchend', onEnd);

event.target.addEventListener('touchcancel', onEnd);

}

四、300ms延迟的原因

1.原因

这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。

这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。

双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。那么这和 300 毫秒延迟有什么联系呢？假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面，在欣喜的时候往往不会care这个300ms的延时问题，可是如今touch端界面如雨后春笋，用户对体验的要求也更高，这300ms带来的卡顿慢慢变得让人难以接受。

2.解决方案

a.使用touchstart 替代，但是存在一点问题就是当我们仅仅想滑动屏幕时，也会触发touchstart事件

b.tab.js

c.zepto.js 这个也有一个问题，就是点透问题。

d.禁用缩放

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

e.FastClick.js

五、点透问题

1.什么是点透

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

2.解决方案

a.不混用touchstart和click

b.解决300ms延迟

c.使用一个透明的元素把两个元素分离

六、安卓4.0不触发touchend事件

请看我之前写的移动端开发踩坑日记——安卓4.4.2不触发touchend事件

移动web开发——touch的那些事

转至元数据结尾