vue h5页面 解决touchstart,touchmove,touchend,click事件触发产生的问题
我的思路是,触发touchstart方法的时候延迟200毫秒如果是就是触摸事件,否则在touchend里面判断就是点击十点,调用点击事件的方法即可。当你的需要即要求可以完成触摸事件,又要求有点击事件的时候,我们要搞清楚一个问题,事件触发的排序问题。
·
当你的需要即要求可以完成触摸事件,又要求有点击事件的时候,我们要搞清楚一个问题,事件触发的排序问题。
1,touchstart>touchmove>touchend>click
2, touchstart>touchend>click
首先要解决的问题是触摸事件的时候点击事件不要出现(百度一大堆解决方案),看的顺眼那个就用那个,本初我使用的是event.preventDefault()
<div
@touchmove.prevent="touchmove"
@touchend.prevent="touchend"
@touchstart.prevent="touchstart"
@click="sample" id="child"
class="draggable-item" ></div>
我的思路是,触发touchstart方法的时候延迟200毫秒如果是就是触摸事件,否则在touchend里面判断就是点击十点,调用点击事件的方法即可
touchend(){
let self = this;
clearTimeout(self.Loop);
if (self.Loop !== 0) {
alert('点击事件')
this.sample()
}
return false;
},
touchstart(event){
let child = document.getElementById('child')
this.startX = event.targetTouches[0].pageX - child.offsetLeft;
this.startY = event.targetTouches[0].pageY - child.offsetTop;
let self = this;
//执行长按的内容
self.Loop = setTimeout(function () {
self.Loop = 0;
}, 200);
return false;
},
touchmove(){
},
sample(){
console.log('点击事件')
}
更多推荐
所有评论(0)