<div :class="card“ :style="{'margin-top':index>0?'2rem':'1rem'}" @touchstart="gotouchstart(item.id)" @touchend="gotouchend(item.id)"></div>
data(){
return{
timeOut:null,
}
}
// 手指按下事件
gotouchstart(id) {
window.isClick = true
clearTimeout(this.timeOut)
this.timeOut = setTimeout(()=>{
console.log('长按事件',id)
this.delectUserDrugsRemindNew(id);
window.isClick = false
}, 1000)
},
gotouchend(id) {
if (window.isClick) {
this.editWarn(id)
console.log('点击事件',id)
}
},
gotouchmove(id) {
console.log('移动事件')
window.isClick = false
},
// 项目销毁前清除定时器
beforeDestroy() {
clearTimeout(this.timeOut)
},
第二种
<div @touchstart="down(item.id)" @touchend="up(item.id)" @click="clickEvent(item.id)" />
// 手指按下事件
down(id) {
this.timeOut = setTimeout(()=>{
console.log("长按事件");
this.delectUserDrugsRemindNew(id);
this.isClick = false;
},1000)
},
//手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
up(id) {
clearTimeout(this.timeOut);
//鼠标释放时让lock异步执行,setTimeout因为异步任务,所以会放到任务队列最后执行,让click事件先执行了
setTimeout(()=>{
console.log("点击事件");
this.isClick = true;
})
},
clickEvent(id){
this.editWarn(id)
console.log('点击跳转');
},