移动端 touch事件以及touch事件点击穿透的解决方法
提示： touchstart—>touchmove—>touchend ----> click
上面的四种点击都可以在移动端进行使用!但是有明确的区别!
移动端:touchstart — touchmove — touchend ,三个事件是专门为移动端监测,触摸开始(按下),触摸移动,触摸结束(离开),三个事件.
文章目录
移动端 touch事件以及touch事件点击穿透的解决方法前言一、touch事件1.touchstart----> touchmove----> touchend二、点击穿透问题1.什么是点击穿透2.点击穿透的解决办法第一种解决办法(直接都用touchstart,最简单!!!!):第二种解决办法(太麻烦):第三种解决办法(太麻烦):前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、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) //windowb._node.style.display = "none"})a._node.onclick = function(){console.log("点击A")}</script>
第三种解决办法(太麻烦):
代码如下（示例）：
<script src="/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>
