点透(click)——web移动端常见问题的产生原因及解决办法（fastclick）

最新推荐文章于 2024-08-09 08:27:00 发布

Pop–

最新推荐文章于 2024-08-09 08:27:00 发布

阅读量578

点赞数 1

分类专栏：移动web 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45026839/article/details/113654770

版权

移动web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

序言：关于click点透的原因和方法可以参考文章：https://www.cnblogs.com/zldream1106/p/3670988.html 在这里面讲的已经很详细了。

当需要制作一个页面，既能在pc端和移动端响应，但是没有点透，操作也没有延迟。这时常常需要用 fastclick 来解决点透这个问题。

注： 使用 fastclick.js 可以解决点透这个问题，原先是因为源生的tap事件以及zepto中的tap都不能有效的解决这个问题，不过最新的zepto已经修复了。但是这里还是看看源生的tap是怎么产生点透的。

一、代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #F7F7F7;
        }

        .box {
            width: 320px;
            height: 320px;
            margin: 100px auto;
            position: relative;
        }

        .tap {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            margin: -100px 0 0 -100px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
        }

        .click {
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            margin: -150px 0 0 -150px;
            background-color: pink;
            position: absolute;
            left: 50%;
            top: 50%;
        }
    </style>
</head>

<body>
   
    <div class="box">
        <div class="click">click</div>
        <div class="tap">tap</div>
    </div>
    <script>
        var tap = document.querySelector(".tap");
        var click = document.querySelector(".click");

        /*为tap添加touch事件*/
        tap.addEventListener("touchstart",function(){
            tap.style.visibility="hidden";
        })
        /*为click添加click事件*/
        click.onclick=function(){
            console.log(123);
        }
    </script>
</body>

</html>

二、运行之后当你点击tap元素块的时候在控制台会打印出 123 如下图所示：在这里插入图片描述

为什么点击 tap 元素块会打印出 click 元素块的结果呢？原因就是产生了点透 当我点击tap元素块的时候它透过了tap元素块
去操作了tap元素块下面的click元素块。

三、这里还要特别注意点透产生的条件有哪些

A/B两个层上下z轴重叠。

上层的A点击后消失或移开。（这一点很重要）

B元素本身有默认click事件（如a标签）或 B绑定了click事件。

在以上情况下，点击A/B重叠的部分，就会出现点透的现象。

四、如何使用 fastclick 来解决

下载fastclick.js 地址：https://github.com/ftlabs/fastclick fastclick.js 在 lib 目录下。
在页面中引入fastclick.js ：

<!--引入fastclick文件-->
    <script src="./js/fastclick.js"></script> -->

绑定：

 /*使用fastclick:在pc端也能响应  解决延迟问题*/
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function () {
                //参数可以是任意的dom元素，如果写document.body，说明会将document.body下面的所的元素都绑定fastclick/
                FastClick.attach(document.body);
            }, false);
        }

或者 :

 $(function() {
        FastClick.attach(document.body);
    });

五、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #F7F7F7;
        }
        .box {
            width: 320px;
            height: 320px;
            margin: 100px auto;
            position: relative;
        }
        .tap {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            margin: -100px 0 0 -100px;

            background-color: red;

            position: absolute;
            left: 50%;
            top: 50%;
        }
        .click {
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            margin: -150px 0 0 -150px;
            background-color: pink;
            position: absolute;
            left: 50%;
            top: 50%;
        }
    </style>
</head>
<body>
<!--引入fastclick文件-->
<script src="./js/fastclick.js"></script>
<div class="box">
    <div class="click">click</div>
    <div class="tap">tap</div>
</div>
<script>
    var tap=document.querySelector(".tap");
    var click=document.querySelector(".click");
    /*使用fastclick:在pc端也能响应  解决延迟问题*/
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            /!*参数可以是任意的dom元素，如果写document.body，说明会将document.body下面的所的元素都绑定fastclick*!/
            FastClick.attach(document.body);
        }, false);
    }
    tap.addEventListener("click",function(){
        tap.style.visibility="hidden";
    })
    click.addEventListener("click",function(){
        console.log(123);
    })
</script>
</body>
</html>