双击事件与单击事件的那些事

前言

项目遇到了双击事件会同时触发单击事件的bug，还是简单记录一下。

心里话：日更太累了。以前都是单独花好几天的时间去看别人的博客，看很多博客后再慢慢输出。现在是边输入边输出(有时候为了能偷懒还把一长篇拆成两部分)，薅完这次全勤羊毛，之后随缘参加日更活动了(再这样下去，感觉写博客的初心都快变了)

问题重现

<el-button type="primary" @click="myclick" @dblclick="mydblclick">
  test
</el-button>

function myclick() {
  console.warn("单击事件");
}

function mydblclick() {
  console.error("双击事件");
}

image-20220619162952868

合情合理，双击事件也是两次点击事件，所以同时会触发单击事件click和双击事件dblclick。但是需求是单击和双击不同的处理，所以双击的时候不应该触发单击事件。

解决方案

思路：可以使用函数防抖的做法，单击事件触发后，开启一个定时器，双击事件触发的话就清除定时器。

let timer;

function myclick() {
  timer = setTimeout(() => {
    console.warn("单击事件");
  }, 300);
}

function mydblclick() {
  clearTimeout(timer);
  console.error("双击事件");
}

dblclick

可以发现还是有问题，双击事件还是会触发一次单击事件。

但这个问题实际上是定时器的使用上有点问题。先看个小案例。

let timer;

timer = setTimeout(() => {
  console.log(1);
});

timer = setTimeout(() => {
  console.log(2);
});

clearTimeout(timer);

这个案例中，会打印1。也就是说实际上只清楚了第二个定时器，所以我们之前的代码还需要清除第一个定时器才行。

let timer;

function myclick() {
  clearTimeout(timer);

  timer = setTimeout(() => {
    console.warn("单击事件");
  }, 300);
}

function mydblclick() {
  clearTimeout(timer);
  console.error("双击事件");
}

大功告成。

el-checkbox使用注意点

双击事件和单击事件的问题处理完了，再加上一下下项目的踩坑点。

el-checkbox没有事件对象，平常的事件对象在el-checkbox上是布尔值，表示是否选中。但是原生版本是有的。

<el-checkbox @change="mychange"></el-checkbox>
<input type="checkbox" @click="mychange" />

function mychange(e) {
  console.log(e);
}

el-checkbox

另外，直接修改checkbox绑定的值，不会触发change事件。

change事件直接修改值不会触发。

<input type="checkbox" v-model="checked" @click="mychange" />
<button @click="myclick">change</button>

import { ref } from "@vue/reactivity";

const checked = ref(true);

function mychange(e) {
  console.log(e);
}

function myclick() {
  checked.value = !checked.value;
}

el-checkbox

可以在直接修改绑定值的同时，手动调用change事件的处理函数来模拟触发change事件，不过，事件对象的传参就不太好模拟了。当然，如果使用的是el-checkbox的话，因为它没有事件对象，而是布尔值，所以只需要把checkbox当前绑定的值传过去即可。