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>
标签：24,单击,触摸,事件,timeOutEvent,clickTimes,双击 From： https://www.cnblogs.com/chenJieLing/p/17532380.html