比如需求是给一个dom或者按钮添加单机事件,还要添加双击事件,如果不做处理,在双击按钮的时候,它会执行两次单机事件和一次双击事件;
例如:
<template>
<div >
<button @click="clickHandler" @dblclick="dblclickHandler">注册</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
clickHandler() {
console.log('单机事件')
},
dblclickHandler() {
console.log('双击事件')
}
}
}
</script>
如果双击按钮,这时控制台会输出:
解决办法:
利用计时器,在大概时间模拟双击事件
<template>
<div >
<button @click="clickHandler" @dblclick="dblclickHandler">注册</button>
</div>
</template>
<script>
export default {
data() {
return {
timer: null, //添加一个计时器
}
},
created() {
},
mounted() {
},
methods: {
clickHandler() {
clearTimeout(timer); //清除未执行的定时器
timer = setTimeout(function () {
console.log('单机事件')
}, 400);
},
dblclickHandler() {
clearTimeout(timer); //清除未执行的定时器
console.log('双击事件')
}
}
}
</script>
vue3的写法:
let timer = null;
//单击事件
const click=()=>{
clearTimeout(timer); //清除未执行的定时器
timer = setTimeout(function () {
console.log('单击事件'); //单击要执行的事件处理
}, 400);
}
//双击事件
const doubleClick=()=>{
clearTimeout(timer); //清除未执行的定时器
console.log('双击事件'); //双击要执行的事件处理
}