vue中对同一元素添加单击和双击事件并解决他们之间的冲突
第一种<div id="app"><button @click="a" @dblclick="b">点击</button></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let...
·
第一种
<div id="app">
<button @click="a" @dblclick="b">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
name: "清欢"
},
methods: {
a() {
this.flag = true
setTimeout(() => {
if (this.flag) {
console.log(1);
}
}, 300);
},
b() {
this.flag = false
console.log(5);
}
}
})
</script>
第二种
<div id="app">
<button @click="a" @dblclick="b">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let timer = null
let vm = new Vue({
el: "#app",
data: {
name: "清欢"
},
methods: {
a() {
clearTimeout(timer)
timer = setTimeout(() => {
console.log(1);
}, 300);
},
b() {
console.log(5);
clearTimeout(timer)
}
}
})
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)