判断鼠标单双击事件

最新推荐文章于 2024-08-23 17:28:19 发布

initialdmg

最新推荐文章于 2024-08-23 17:28:19 发布

阅读量2.9k

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/initialdmg/article/details/74105153

版权

在处理列表项的单击和双击事件时，发现底层组件仅提供单击事件，但通过查看源码，了解到其实组件内部并未处理单双击区别。为解决此问题，采用了一个延迟判断的方法，即设置一个200ms的计时器，若期间无再次点击则触发单击事件，反之则视为双击事件。这种方法有效地实现了单双击事件的区分。

摘要由CSDN通过智能技术生成

在做一个列表时，项目需要点击一行时分别触发单击事件和双击事件。然而现在提供的接口只有单击事件。

后来看源码，发现底层组件提供了单击事件和双击事件。尝试用这两个组件，在双击时触发了两次单击事件和一次单击事件。原来是底层组件内部没有判断单双击的逻辑。只是简单的把事件绑定到 DOM 原生的单双击事件上。

于是需要做一个延时判断单双击的方法。

思路是：创建一个计时器。如果 200ms 内没有另一次点击，那么触发单击事件，并销毁计时器；如果当前存在计时器（计时器 ID 存在），那么可以判定此次点击是双击事件。触发双击事件并重置销毁计时器 ID。

下面是代码：

function ClickTimer(that) {
   
    let timer = null;
    let flag = false; // false为单击
    let prevRecord;

    this.click =

关注

专栏目录