移动端点击、滑动和长按事件

• 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>