移动web touch事件
Posted HelloHello233
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动web touch事件相关的知识，希望对你有一定的参考价值。
参考：http://www.cnblogs.com/dojo-lzz/p/5452575.html
wap中的原生touch 事件，touchstart、touchmove、touchend、touchcancel，这些事件仅仅在移动端才会被触发，在pc端无效。而且在web中也没有PC的鼠标事件。两个端都存在click事件，但在web下会存在以下两个问题：
移动端click事件存在300ms延迟
因为网页中存在一种双击放大的操作，两次点击之间不超过300ms则认为是双击，所以浏览器为了区别是双击还是单击，单击的效果会有300ms延迟。了有更好的用户体验，需要自己利用以上的4个touch事件封装一些更快的点击事件（一般由touchstart以及touchend组成）其实也可以使用第三方库如zepto，使用里面封装的tab事件。或者使用插件 fastclick。
穿透现象
遮罩上绑定一个touchstart事件，触发就使遮罩消失，然后300ms后触碰点下的元素的click事件会被触发。原因也还是因为以上的300ms延迟。点击300ms发生后，浏览器寻找触碰点的顶层元素，然后触发一次click事件，大致过程如下：
e = document.elementFromPoint(x, y);
e.dispatchEvent(\'click\');
以下代码会出现穿透现象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title></title> </head> <body> <style> .splash{ position: fixed; width: 100%; height: 100%; background-color: rgba(99,99,99,0.2); } </style> <div class="splash"></div> <button onclick="console.log(\'click\')">这是按钮</button> <script> let splash = document.querySelector(\'.splash\'); splash.addEventListener(\'touchend\',()=>{ splash.style.display = "none"; }) </script> </body> </html>
为了解决以上两个问题，需要自己封装web的点击事件，封装的思路如下：
- touchstart和touchend组成一次点击事件，按下和抬起之间所移动的距离不得超过4px
- 在捕获阶段，对click事件进行事件流拦截
以上是关于移动web touch事件的主要内容，如果未能解决你的问题，请参考以下文章