【移动端】点击穿透的五种解决方法

75 阅读 0 评论 50 点赞

我是靠谱客的博主欣慰大象，最近开发中收集的这篇文章主要介绍【移动端】点击穿透的五种解决方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

- 什么是点击穿透
- 解决方法
- - 方法一
  - 方法二
  - 方法三（建议使用）
  - 方法四
  - 方法五

什么是点击穿透

在触发完touchstart事件的时候紧接着触发他父级元素的click事件

具体来看以下例子来了解什么是点击穿透：
在这里插入图片描述

在点击关闭按钮后关闭遮罩层并产生了点击穿透问题

以下是源码：

<script src="https://cdn.bootcss.com/holder/2.9.6/holder.min.js"></script>

<div class="gap"></div>
<div class="gap"></div>
<div class="swiper"></div>
<div class="gap"></div>

<div id="nav">
    <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
    <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
    <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
    <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
    <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
</div>

<div id="zhezhao">
    <div class="content">
        <div class="remind">充值成功</div>
        <button id="close">关闭</button>
    </div>
</div>

* {
       margin: 0;
       padding: 0;
   }

   ul {
       list-style: none;
   }

   .swiper {
       width: 80%;
       height: 120px;
       background: #999;
       margin: 0 auto;
   }

   .gap {
       height: 50px;
   }

   #nav {
       width: 80%;
       height: 100px;
       margin: 0 auto;
       display: flex;
   }

   .item {
       overflow: hidden;
       height: 60px;
       width: 60px;
   }

   .item img {
       border-radius: 50%;
   }

   #zhezhao {
       width: 100%;
       height: 100%;
       position: absolute;
       left: 0;
       top: 0;
       background: #000;
       opacity: 0.5;
   }
   .content{
       width:50%;
       height:100px;
       margin: 220px auto;
       text-align: center;
       padding-top:30px;
       color:white;
   }

解决方法

方法一

e.preventDefault();阻止默认行为

<script>
    //获取元素
    var close = document.querySelector('#close');
    var zhezhao = document.getElementById('zhezhao');

    close.addEventListener('touchstart', function(e){
        //隐藏
        // display:none;
        zhezhao.style.display = 'none';

        // 解决点击穿透方法一
        e.preventDefault();
        
    });

</script>

方法二

使用 addEventListener 的第三个参数

<script>
    //获取元素
    var close = document.querySelector('#close');
    var zhezhao = document.getElementById('zhezhao');

    close.addEventListener('touchstart', function(e){
        //隐藏
        zhezhao.style.display = 'none';
    });

    /*
    给html页面阻止默认行为  
    passive属性是 addEventListener 的第三个参数
    */ 
    document.documentElement.addEventListener('touchstart', function(e){
        //阻止默认行为
        e.preventDefault();

    },{
        passive:false // 使e.preventDefault 不失效
    });

</script>

方法三（建议使用）

给你的最外层结构增加一个包裹元素并使用 e.preventDefault(); 来阻止默认行为


<!-- 包裹元素 app -->

<div id="app">
    <div class="gap"></div>
    <div class="gap"></div>
    <div class="swiper"></div>
    <div class="gap"></div>

    <div id="nav">
        <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
        <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
        <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
        <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
        <div class="item"><a href="http://m.atguigu.com"><img data-src="holder.js/50x50" alt=""></a></div>
    </div>

    <div id="zhezhao">
        <div class="content">
            <div class="remind">充值成功</div>
            <button id="close">关闭</button>
        </div>
    </div>
</div>

<script>
    //获取元素
    var close = document.querySelector('#close');
    var zhezhao = document.getElementById('zhezhao');
    var app =  document.querySelector('#app');

    close.addEventListener('touchstart', function (e) {
        //隐藏
        zhezhao.style.display = 'none';
    });

    //增加一个包裹元素
    app.addEventListener('touchstart', function(e){
        e.preventDefault();
    });

</script>

方法四

利用 location.href = this.dataset.href 来解决

把包裹图片的a元素删除，并用 data-href 属性作用与图片的包裹容器上，来存放图片链接，利用 location.href = this.dataset.href 来解决`

源码如下

<div id="app">
    <div class="gap"></div>
    <div class="gap"></div>
    <div class="swiper"></div>
    <div class="gap"></div>

    <div id="nav">
        <div class="item" data-href="http://www.baidu.com" data-test="abc"><img data-src="holder.js/50x50" alt=""></div>
        <div class="item" data-href="http://www.jd.com"><img data-src="holder.js/50x50" alt=""></div>
        <div class="item" data-href="http://www.taobao.com"><img data-src="holder.js/50x50" alt=""></div>
        <div class="item" data-href="http://www.atguigu.com"><img data-src="holder.js/50x50" alt=""></div>
        <div class="item" data-href="http://www.bilibili.com"><img data-src="holder.js/50x50" alt=""></div>
    </div>
    <div id="zhezhao">
        <div class="content">
            <div class="remind">充值成功</div>
            <button id="close">关闭</button>
        </div>
    </div>
</div>

<script>
    var tupian = document.querySelectorAll('.item');

    for(var i=0;i<tupian.length;i++){
        tupian[i].addEventListener('touchstart', function(){
            //事件处理程序
            // location.href = this.dataset.href;
            // console.log(this.dataset.href);

            // this.dataset.test    getAttribute('data-href')
            location.href = this.dataset.href;
        });
    }

    //获取元素
    var close = document.querySelector('#close');
    var zhezhao = document.getElementById('zhezhao');
    var app =  document.querySelector('#app');

    close.addEventListener('touchstart', function (e) {
        //隐藏
        zhezhao.style.display = 'none';
    });

    //

</script>

方法五

使用定时器 setTimeout

<script>
    //获取元素
    var close = document.querySelector('#close');
    var zhezhao = document.getElementById('zhezhao');

    close.addEventListener('touchstart', function (e) {
        //隐藏
        // display:none
        setTimeout(function () {
            zhezhao.style.display = 'none';
        }, 400)
    });


</script>

最后

以上就是欣慰大象为你收集整理的【移动端】点击穿透的五种解决方法的全部内容，希望文章能够帮你解决【移动端】点击穿透的五种解决方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：移动端
浏览次数：75 次浏览
发布日期：2023-10-05 19:45:53
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzogf4_13_z_10_z.html

【移动端】点击穿透的五种解决方法

概述

文章目录

什么是点击穿透

解决方法

方法一

方法二

方法三（建议使用）

方法四

方法五

最后

评论列表共有 0 条评论

发表评论取消回复

【移动端】点击穿透 的五种解决方法

概述

文章目录

什么是点击穿透

解决方法

方法一

方法二

方法三（建议使用）

方法四

方法五

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

【移动端】点击穿透的五种解决方法

发表评论取消回复