单双击判断

最新推荐文章于 2023-09-09 11:20:20 发布

原创最新推荐文章于 2023-09-09 11:20:20 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#闭包 #react #js #单双击

笔记专栏收录该内容

8 篇文章

订阅专栏

在React应用中实现单双击事件时遇到挑战，本文分享了一种利用闭包来优雅解决的方法，适用于JavaScript和React开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上次在 react 中使用单双击事件时遇到了问题，当时写了一个单双击解决方案。

今天在 github 上看到了一个更优雅的方案，利用了闭包：

<div id="thing">Click me</div>

var thingEl = document.getElementById('thing');

thingEl.addEventListener(
    'click',
    getClickHandler(
        function () {
            console.log('click');
        },
        function () {
            console.log('dblclick');
        }
    )
);

function getClickHandler(onClick, onDblClick, delay) {
    var timeoutID = null;
    delay = delay || 250;
    return function (event) {
        if (!timeoutID) {
            timeoutID = setTimeout(function () {
                onClick(event);
                timeoutID = null
            }, delay);
        } else {
            timeoutID = clearTimeout(timeoutID);
            onDblClick(event);
        }
    };
}