移动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事件进行事件流拦截
posted @ 2017-11-17 00:18  HelloHello233  阅读(280)  评论(0)  编辑  收藏  举报