赤蓝紫

V1

2022/06/28阅读:12主题:姹紫

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

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

前言

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

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

问题重现

<el-button type="primary" @click="myclick" @dblclick="mydblclick">
  test
</el-button>
function myclick({
  console.warn("单击事件");
}

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

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

解决方案

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

let timer;

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

function mydblclick({
  clearTimeout(timer);
  console.error("双击事件");
}
dblclick
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
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
el-checkbox

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

分类:

前端

标签:

JavaScript

作者介绍

赤蓝紫
V1

公众号:赤蓝紫