24.单击、双击、触摸长按事件

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>

 

3.问题：为同一元素绑定单击事件与双击事件时，解决单击事件与双击事件冲突？

方案：可用单击模拟双击事件。

<template>
    <div @click="clickFun">点击</div> 
</template>
<script>
export default{
    data(){
        return{
            clickTimes:0  //记录点击次数
        }
    },
    methods:{
        clickFun(){ 
            let _this = this
            _this.clickTimes++;
            if (_this.clickTimes === 2) {  
                _this.clickTimes = 0;  
                //  处理双击事件... 
            }
            setTimeout(function () {
                if (_this.clickTimes === 1) {
                    _this.clickTimes = 0; 
                    //  处理单击事件... 
                }
            }, 250) 
        } 
    }
}
</script>

 

4.触摸：touchstart、touchmove、touchend、touchcancel

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

 

5.问题：为同一元素绑定单击事件与长按事件，解决单击事件与长按事件冲突？

方案：使用touchstart、touchend事件。由于长按会触发浏览器的默认行为，引入.prevent修饰符。

<template>
    <div  @touchstart.prevent="goTouchstart()" @touchend.prevent="goTouchend()">触摸</div> 
</template>
<script>
export default{
    data(){
        return{
            timeOutEvent:0 //记录触摸时长
        }
    },
    methods:{
        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) {
                //  处理单击事件
            }
        }
    }
}
</script>