vue长按事件
html<template><div><div class="list wauto" @touchstart="gtouchstart(1)" @touchmove="gtouchmove()" @touchend="gtouchend(1)"&a
·
html
<template>
<div>
<div class="list wauto" @touchstart="gtouchstart(1)" @touchmove="gtouchmove()" @touchend="gtouchend(1)">长按事件</div>
</div>
</template>
js
<script>
export default {
data() {
return {
timeOutEvent:0
}
},
mounted: function() {
},
methods: {
//开始按
gtouchstart(item){
var self = this;
this.timeOutEvent = setTimeout(function(){
self.longPress(item)
},500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适
return false;
},
//手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
gtouchend(item){
clearTimeout(this.timeOutEvent);//清除定时器
if(this.timeOutEvent!=0){
//这里写要执行的内容(尤如onclick事件)
this.goChat(item);
}
return false;
},
//如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
gtouchmove(){
clearTimeout(this.timeOutEvent);//清除定时器
this.timeOutEvent = 0;
},
//真正长按后应该执行的内容
longPress(id){
this.timeOutEvent = 0;
//执行长按要执行的内容,如弹出菜单
console.log("执行的内容");
},
goChat(id){
console.log("点击");
}
}
}
</script>
更多推荐
已为社区贡献15条内容
所有评论(0)