vue在移动端点击,滑动,长按的事件判断
思路:1)调用js的touch的API接口分别监听touchstart,touchmove,touchend事件2)使用计时器可以设定时间用于区分长按和点击<template><div class="about"><p @touchstart="start" @touchmove="move" @touchend="end">...
·
思路:
1)调用js的touch的API接口分别监听touchstart,touchmove,touchend事件
2)使用计时器可以设定时间用于区分长按和点击
<template>
<div class="about">
<p @touchstart="start" @touchmove="move" @touchend="end">
this is a picture
</p>
</div>
</template>
<script>
export default {
data() {
return {
longClick: 0,
timeOutEvent: 0
};
},
methods: {
start() {
var that = this;
this.longClick = 0;
this.timeOutEvent = setTimeout(function() {
that.longClick = 1;
console.log("这是长按")
}, 500);
},
move(e) {
clearTimeout(this.timeOutEvent);
this.timeOutEvent = 0;
e.preventDefault();
console.log("这是滑动")
},
end() {
clearTimeout(this.timeOutEvent);
if (this.timeOutEvent != 0 && this.longClick == 0) {
//点击
//此处为点击事件----在此处添加跳转详情页
console.log("这是点击");
}
return false;
}
}
};
</script>
更多推荐
已为社区贡献18条内容
所有评论(0)