转至元数据结尾
转至元数据起始
移动端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事件
