HTML在移动端页面设计是touch事件注意事项

HTML在移动端页面设计是touch事件注意事项

移动端touch事件

当用户手指放在移动设备在屏幕上滑动会触发的touch事件
•touchstart——当手指触碰屏幕时候发生。无论当前有多少只手指
•touchmove——当手指在屏幕上滑动时连续触发。一般咱们再滑屏页面，会调用event的preventDefault()能够阻止默认状况的发生：阻止页面滚动
•touchend——当手指离开屏幕时触发
•touchcancel——系统中止跟踪触摸时候会触发。例如在触摸过程当中忽然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会形成按钮点击延迟甚至是点击失效。

如下是历史缘由，来源一个公司内一个同事的分享：

2007年苹果发布首款iphone上iOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展现在手机端上，使用了双击缩放(double tap to zoom)的方案，好比你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然能够撑满整个屏幕，可是字体、图片都很小看不清，此时能够快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

缘由就出在浏览器须要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转连接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击连接仍是要双击该部分区域进行缩放操做，因此，捕获第一次单击后，浏览器会先Hold一段时间t，若是在t时间区间里用户未进行下一次点击，则浏览器会作单击跳转连接的处理，若是t时间里用户进行了第二次单击操做，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操做。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。形成的后果用户纯粹单击页面，页面须要过一段时间才响应，给用户慢体验感受，对于web开发者来讲是，页面js捕获click事件的回调函数处理，须要300ms后才生效，也就间接致使影响其余业务逻辑的处理。

 

解决方案：

•fastclick能够解决在手机上点击事件的300ms延迟
•zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

一、ontouchstart 
二、ontouchmove 
三、ontouchend 
四、onclick

解决300ms延迟的问题，也能够经过绑定ontouchstart事件，加快对事件的响应