Vue的单击、双击、长按事件？

1、单击事件click

 <div @click="clickFun"></div> //是否有括号决定是否可传参
 <div @click="clickFun($event)"></div> // $event表示当前事件对象
 <div @click.stop="clickFun()"></div>   //.stop修饰符可阻止事件冒泡
 <div @click.prevent="clickFun()"></div>  //.prevent修饰符可阻止默认行为

2、双击事件dblclick

 <div @dblclick="clickFun()"></div> 

需求：为同一元素绑定单击事件与双击事件时，解决总执行单击事件，双击事件无效？
可用单击模拟双击事件：

<div @click="clickFun"></div>  

clickTimes:0  //记录点击次数

clickFun(){ 
    let _this = this
    _this.clickTimes++;
    if (_this.clickTimes === 2) {  
        _this.clickTimes = 0;  
        //  处理双击事件... 
    } 
    setTimeout(function () {
        if (_this.clickTimes === 1) {
            _this.clickTimes = 0; 
            //  处理单击事件... 
        }
    }, 250) 
}  

3、长按事件 

由于Vue并未声明长按事件，我们需要自定义实现。
需求：为同一元素绑定单击事件与长按事件，解决单击事件与长按事件冲突？
在这里引入触摸事件：

touchstart: //手指放到屏幕上时触发 
touchmove: //手指在屏幕上滑动时连续地触发 
touchend: //手指移开屏幕时触发 
touchcancel: //系统停止跟踪触摸时触发，使用较少

实现需要只需使用touchstart、touchend事件，由于长按会触发浏览器的默认行为，引入.prevent修饰符。

<div  @touchstart.prevent="goTouchstart()" @touchend.prevent="goTouchend()"></div> 

timeOutEvent:0 //记录触摸时长

goTouchstart() {
    let _this = this;
    clearTimeout(_this.timeOutEvent);
    _this.timeOutEvent = setTimeout(function() {
        _this.timeOutEvent = 0;
        //  处理长按事件...
    }, 600);
},
//手如果在600毫秒内就释放，则取消长按事件
goTouchend() {
    let _this = this;
    clearTimeout(_this.timeOutEvent);
    if (_this.timeOutEvent !== 0) {
        //  处理单击事件
    }
}