标签：执行 strong 滑动 onclick 距离 rev src his console
<div> <img src="/static/images/poi-marker-default.png" @touchstart.prevent="touchin()" @touchend.prevent="clickhandle()" > </div>
data() {
return {
Loop:0
}
},
methods: {
touchin(index){ // 长按事件，按住后等待指定事件触发
let that=this;
this.Loop = setTimeout(function() {
that.Loop = 0;
console.log("长按触发")
}, 500);
return false;
},
clickhandle() { // 模拟点击事件（点击后迅速抬起）
let that=this;
clearTimeout(this.Loop);
if(that.Loop!==0){
console.log("点击事件")
}
return false;
}
}
ps：最近一直在做移动端的项目，先说下需求，点击图片预览，长按删除，之前在图片上帮定了点击事件和长按事件，但是会有冲突，由于智商不够，百度半天才解决的，最后直接把点击事件给去了，直接用定时器械的，记录下，下次直接用就好了
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
由于这次不需要计算移动的距离，所以一只用touchstart和touchend这两个事件
<img v-for="(item,index) in imgurl" :src="item" @touchstart.prevent="touchin(index)" @touchend.prevent="cleartime(imgurl[index])" >
.prevent是阻止浏览器的默认行为，如果不需要的话，就不用添加了，根据自己的实际情况
2，直接在methods里写长按方法和点击事件
一定在data里声明Loop =0；不然不管用
500表示触屏时间，可以根据实际情况写，只要达到这个时间就会触发setTimeout里的事件
touchin(index){
var that=this;
this.Loop = setTimeout(function() {
that.Loop = 0;
//执行长按要执行的内容，如弹出菜单
MessageBox.confirm(‘是否确认删除‘).then(action => {
that.imgurl.splice(index,1)
})
}, 500);
return false;
},
触屏离开的事件
cleartime(index) {
var that=this;
clearTimeout(this.Loop);
if(that.Loop!=0){
//这里写要执行的内容（尤如onclick事件）
that.previewPicture(index)
}
return false;
},
标签：执行 strong 滑动 onclick 距离 rev src his console
原文地址：https://www.cnblogs.com/hfultrastrong/p/12083622.html
