判断鼠标单双击事件

来源:互联网 发布:股骨头坏死做淘宝 编辑:程序博客网 时间:2024/04/30 13:48

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

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

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

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

下面是代码:

function ClickTimer(that) {    let timer = null;    let flag = false; // false为单击    let prevRecord;    this.click = function(time, record) {        if (record == prevRecord) {            if (timer) {                // 是双击                that.props.onRowDbClick(prevRecord);                clearTimer();            }            else {                timer = setTimeout(check, 200);            }        }        else {            clearTimer();            prevRecord = record;            timer = setTimeout(check, 200);        }     }    function check() {        // 单击        that.props.onRowClick(prevRecord);        clearTimer();    }    function clearTimer() {        clearTimeout(timer);        timer = null;        flag = false;    }}

可能有所纰漏,敬请指教