移动端 touch事件以及touch事件点击穿透的解决方法
提示： touchstart—>touchmove—>touchend ----> click
上面的四种点击都可以在移动端进行使用!但是有明确的区别!
移动端: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>