移动端点击、滑动和长按事件
Bubble.vue这是一个移动端的点击、滑动和长按事件Demo/** @Author: Rain* @Date: 2019-01-03 20:48:10* @Last Modified by: Rain* @Last Modified time: 2019-01-03 20:52:03** 这是一个点击、长按和滑动的移动端事件。*/<templ...
·
- Bubble.vue
这是一个移动端的点击、滑动和长按事件Demo
/*
* @Author: Rain
* @Date: 2019-01-03 20:48:10
* @Last Modified by: Rain
* @Last Modified time: 2019-01-03 20:52:03
*
* 这是一个点击、长按和滑动的移动端事件。
*/
<template>
<div>
<button
@touchstart="start"
@touchmove="move"
@touchend="end"
>测试按钮
</button>
</div>
</template>
<script>
export default {
name:"Bubble",
data(){
return{
longClick:0, // 长按标志
timeOutEvent: 0, // 计时器
}
},
methods: {
start: function(){
console.log("----start----")
var that =this;
this.longClick=0; // 初始化
this.timeOutEvent =setTimeout(function(){
that.longClick=1; // 长按标志位
// 此处为长按事件
console.log("长按事件")
},500)
},
move:function(e){
console.log("move")
clearTimeout(this.timeOutEvent); // 清除计时器
this.timeOutEvent = 0; // 清除标志位
e.preventDefault(); // 阻止其他点击事件
},
end:function(){
console.log("----end----")
clearTimeout(this.timeOutEvent); // 清除计时器
if(this.timeOutEvent!=0 && this.longClick==0){ // 判断是否非长按事件
//此处为点击事件
console.log('点击事件')
}
return false;
},
}
}
</script>
<style >
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)