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

简介: 双击事件与单击事件的那些事

前言

项目遇到了双击事件会同时触发单击事件的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当前绑定的值传过去即可。

目录
相关文章
|
6月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
183 1
|
5月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
6月前
失焦事件和点击事件
失焦事件和点击事件
37 1
15zTree - 其他鼠标事件监听
15zTree - 其他鼠标事件监听
36 0
|
JavaScript
原生js实现鼠标长按事件
原生js实现鼠标长按事件
141 0
|
JavaScript
原生js实现全选全不选
原生js实现全选全不选
50 0
|
JavaScript 前端开发
JavaScript 点击事件:一个按钮触发另一个按钮
给按钮 2 添加点击事件 click 触发按钮 1 的点击事件,就算给按钮 1 添加样式 display: none; 或 visibility: hidden; 隐藏起来也能触发。
627 0
14、事件类型(鼠标事件、键盘事件、触屏事件)
14、事件类型(鼠标事件、键盘事件、触屏事件)
151 0