jquery on 双击事件-关于双击争议和单击争议的这些事

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

前言关于双击风暴和单击风暴的这些事

项目中遇到了双击风暴会同时触发单击风暴的bug，简单记录一下。

感想：每天更新太累了。 以前我会一个人花几天时间看别人的博客，看了很多博客之后才逐渐输出。 现在我同时输入和输出（有时我只是为了偷懒而将一个短篇故事分成两部分）。 完成羊绒收藏后，我会参加每日更新活动（再这样下去，我写博客的初衷就失去了）。 改变）

问题复发

  test

复制

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

复制

按理说，双击事件也是双击事件jquery on 双击事件，所以单击事件click和双击事件dblclick会同时触发。 并且要求是单击和双击的处理方式不同，因此双击不应引发单击风暴。

解决方案

思路：可以采用功能聚焦的方法。 单击风暴触发器后，启动计时器，双击风暴触发器可取消计时器。

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

复制

可以发现还有一个问题，双击风暴依然会触发单击风暴。

但这个问题其实是定时器的使用有点问题。 我们先看一个小案例。

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

复制

在这种情况下，将制作副本 1。 换句话说jquery on 双击事件，实际上只有第二个定时器被清除，所以我们之前的代码仍然需要清除第一个定时器。

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

复制

你完成了。

使用el-checkbox时的注意事项

双击风暴和单击风暴的问题已经解决了，下一个项目的坑我们会补充。

el-checkbox没有storm对象，通常的storm对象是el-checkbox上的一个布尔值，表示是否被选中。 并且有一个原生版本。

复制

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

复制

此外，直接更改复选框绑定的值不会触发更改干扰。

如果直接改变该值，不会触发变更风暴。

change

复制

import { ref } from "@vue/reactivity";
const checked = ref(true);
function mychange(e) {
  console.log(e);
}
function myclick() {
  checked.value = !checked.value;
}

复制

您可以直接更改绑定值并自动调用变更风暴处理函数来模拟触发变更风暴。 然而，storm对象的参数传递并不容易模拟。 事实上，如果你使用的是el-checkbox，由于它没有storm对象，而是一个布尔值，所以你只需要传递当前绑定到checkbox的值即可。