touch事件以及点击穿透的三种解决方法(移动端)

满脑子技术的前端工程师

已于 2022-09-07 17:07:30 修改

阅读量5k

点赞数 2

分类专栏：移动端（设备适配、微信小程序、H5）文章标签：前端 javascript web app

于 2021-11-14 17:48:20 首次发布

本文链接：https://blog.csdn.net/weixin_46022934/article/details/121320307

版权

移动端（设备适配、微信小程序、H5）专栏收录该内容

3 篇文章 0 订阅

订阅专栏

移动端 touch事件以及touch事件点击穿透的解决方法

提示： touchstart—>touchmove—>touchend ----> click
上面的四种点击都可以在移动端进行使用!但是有明确的区别!

移动端:touchstart — touchmove — touchend ,三个事件是专门为移动端监测,触摸开始(按下),触摸移动,触摸结束(离开),三个事件.

文章目录

移动端 touch事件以及touch事件点击穿透的解决方法
前言
一、touch事件
- - - 1.touchstart----> touchmove----> touchend
二、点击穿透问题

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、touch事件

1.touchstart----> touchmove----> touchend

touchstart :触摸(点击按下)开始执行，在touchmove之前执行
touchmove:触摸移动的时候执行 , 在touchend之前执行
touchend:触摸结束的时候执行，在touchmove之后执行,在click事件之前执行

<body>
    <div id="d1"></div>
    <script>
        var d1 = document.getElementById("d1")
        //绑定touchstart事件
        d1.addEventListener("touchstart", function(ev) {
            console.log("touchstart:执行了")
        })
		//绑定touchmove事件
        d1.addEventListener("touchmove", function(ev) {
            //ev.targetTouches 可以获取当前第几个触摸触发
            if (ev.targetTouches.length === 1) {
                var finger = ev.targetTouches[0]
                //设置盒子的偏移
                this.style.left = finger.pageX - 75 + 'px'
                this.style.top = finger.pageY - 75 + 'px'
            }
        })
        //绑定rouchend事件
        d1.addEventListener("touchend", function(ev) {
            console.log("")
        })

        // touchstart--->touchmove--->touchend ----> click
    </script>
</body>

二、点击穿透问题

1.什么是点击穿透

点击穿透:设置B盒子在A盒子的上方,给B盒子绑定touchstart事件,给A盒子设置click事件.点击B盒子触发touchstart事件(使B盒子,overflow:hidden),同时也会触发A盒子的click事件.这个就是点击穿透.(主要是click事件不是立马执行，而是有300ms的延迟)

代码如下（示例）：

<body>
    <div id="b">B</div>
    <div id="a">A</div>
    <script>
        var b = document.getElementById("b")
        var a = document.getElementById("a")
        b.ontouchstart = function() {
                this.style.display = 'none'
                console.log("点击了B")
            }
         a.onclick = function() {
                console.log("点击了A")
            } 
    </script>
</body>

2.点击穿透的解决办法

第一种解决办法(直接都用touchstart,最简单!!!):

代码如下（示例）：

//给下面的A盒子同样设置一个touchstart事件
a.ontouchstart = function() {
            console.log("点击了A")
  }

第二种解决办法(太麻烦):

代码如下（示例）：

//需要提前引入tab.js资源包
 <script src="tap.js"></script>
    <script>
        // tap.js解决穿透的原理：在touchend和click之间
        // 添加一个自定义事件tap，暂时不要去监听click事件设置定时器
        // 超过click的滞后时间（300ms），再把click事件加上
        var b = $('#b')
        var a = $('#a')
        //长按事件
        b.on('longtap',function(){
            console.log("关闭b",b)
            console.log(this) //window
            b._node.style.display = "none"
        })
        a._node.onclick = function(){
            console.log("点击A")
        }
    </script>

第三种解决办法(太麻烦):

代码如下（示例）：

 <script src="https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
    <script>
        window.addEventListener("load",function(){
            FastClick.attach(document.body) //把fastclick插件应用到当前页面上
        })
        // FastClick 把移动端的click事件延迟300ms取消掉了
        var a = document.getElementById("a")
        var b = document.getElementById("b")
        b.ontouchstart = function(){
            this.style.display = "none"
        }

        a.onclick = function(){
            console.log("点击A")
        }
    </script>

满脑子技术的前端工程师

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
touch事件以及点击穿透的三种解决方法(移动端)

移动端 touch事件以及touch事件点击穿透的解决方法提示： touchstart—>touchmove—>touchend ----> click上面的四种点击都可以在移动端进行使用!但是有明确的区别!移动端:touchstart — touchmove — touchend ,三个事件是专门为移动端监测,触摸开始(按下),触摸移动,触摸结束(离开),三个事件.文章目录移动端 touch事件以及touch事件点击穿透的解决方法前言一、touch事件1.touchstart-
复制链接

扫一扫