H5移动页面的touch事件与点击穿透问题

最新推荐文章于 2024-08-16 15:34:57 发布

ECMAScripter

最新推荐文章于 2024-08-16 15:34:57 发布

阅读量1w

点赞数 1

分类专栏： JavaScript 前端解决方案

本文链接：https://blog.csdn.net/fabulous1111/article/details/78685747

版权

JavaScript 同时被 2 个专栏收录

79 篇文章 1 订阅

订阅专栏

前端解决方案

62 篇文章 3 订阅

订阅专栏

先举一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,height=device-height,initial-scale=1.0">
    <title>Title</title>
    <style>
        *{padding:0;margin:0;}html,body{width: 100%;height: 100%;}
        .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(26,26,26,0.2);
        }
       a{
            display: block;
            width: 100%;
            height: 100%;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <a href="http://www.baidu.com">去百度</a>
</body>
<script src="jquery.js"></script>
<script>
    $(document).on('touchstart', '.mask', function() {
        $(this).hide();
    })
</script>
</html>

简介：上边例子中，a标签链接到百度，a标签上方漂浮这一个蒙层，js的功能是实现点击蒙层后蒙层消失。

效果：点击蒙层，蒙层消失；300毫秒后，下边的a标签的click事件被触发，网页跳转到百度，即发生了事件穿透。

把js代码换成以下写法：

<script>
    $(document).on('click', '.mask', function() {
        $(this).hide();
    })
</script>

效果：点击蒙层，蒙层消失，但存在300毫秒延迟。

解释：

一.click与300ms延迟
移动浏览器提供一个特殊的功能：双击（double tap）放大

300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms。

移动事件提供了touchstart、touchmove、touchend却没有提供tap支持，主流框架（库）都是手动实现了自定义tap事件，以求消除300ms延迟，提高页面响应速度。对于简单的页面，可以把touchstart或者touchend当作tap来用，但存在一些问题，比如手指接触目标元素，按住不放，慢慢移出响应区域，会触发touchstart事件执行对应的事件处理器（本不应该触发），touchend事件也存在类似的问题。

此外，使用原生touch事件也存在点击穿透的问题，因为click是在touch系列事件发生后大约300ms才触发的，混用touch和click肯定会导致点透问题，下面详细介绍

二.点击穿透问题

①点击蒙层（mask），蒙层消失后发现触发了按钮下面元素的click事件，蒙层绑定的是touch事件，而按钮下面元素绑定的是click事件（a默认为click事件），touch事件触发之后，蒙层消失，300ms后这个点的click事件触发，事件的target自然就是蒙层下面的元素，蒙层此时已经消失。

②如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转，因为a标签跳转默认是click事件触发，所以原理和上面的完全相同。

三、解决方法
①只用touch：把页面内所有click全部换成touch事件（touchstart、’touchend’、’tap’），需要特别注意a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span + tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span + touchend就可以了，毕竟tap需要引入第三方库

缺点：不利于seo（因为没有a标签，内链外链之类的也就没有了）

②只用click。缺点：会带来300ms延迟。

③使用fastclick消除300毫秒延迟，随后只用click。比较好用的解决方案，只是多加载了几K的资源。

④遮挡：给mask的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画duration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。

注：代码中本人使用的是JQuery，如果是开发，推荐使用移动端的js库zepto.js，用法跟JQuery差异不大，touchstart请换成tap（相当于pc端的click），但依然会存在延迟，解决方法如上。

tap：原生的touch事件本身是没有tap的，js库里提供的tap事件都是模拟出来的，单次点击300ms内再次点击则判定为double tap。