js单击/双击/三击，长按/单击

最新推荐文章于 2024-06-28 13:55:12 发布

酸菜且多余

最新推荐文章于 2024-06-28 13:55:12 发布

阅读量558

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wt102/article/details/136568829

版权

本文讲述了在Web开发中如何使用JavaScript为页面元素实现单击、长按和多击事件的区分，通过定时器和点击计数器来检测用户的交互行为，提升用户体验。

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

之前写项目的时候遇到了一个这样的需求，对于页面上的一个元素做单击/长按，触发不同事件，后面考虑到鲁棒性还是换成单击/双击/三击的形式了，不过这些事件之间的区分给人的印象还是深刻的（其实就是卡在这里太久了，乐），写篇文章记录一下。

单击/长按触发不同事件

<!DOCTYPE html>
<html>
<head>
    <title>长按/单击</title>
</head>
<body>
    <div id="clickableDiv" style="width: 200px; height: 100px; background-color: #90EE90;"></div>

    <script>
        var button = document.getElementById('clickableDiv');
        var timer = null; // 用于长按检测的计时器
        var delay = 500; // 长按的阈值（毫秒）

        button.addEventListener('mousedown', function() {
            // 当用户按下按钮时，开始计时
            timer = setTimeout(function() {
                console.log('长按');
                timer = null; // 长按事件发生后清除计时器
            }, delay);
        });

        button.addEventListener('mouseup', function() {
            // 当用户释放按钮时，检查计时器是否仍然存在
            if (timer) {
                clearTimeout(timer); // 如果计时器存在，清除它
                console.log('单击'); // 并且认为这是一次单击事件
            }
        });

        button.addEventListener('mouseleave', function() {
            // 如果在长按过程中鼠标离开了元素，也应该取消长按操作
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
        });
    </script>
</body>
</html>

单击/双击/三击触发不同事件

<!DOCTYPE html>
<html>
<head>
    <title>单击/双击/三击</title>
</head>
<body>
    <div id="clickableDiv" style="width: 200px; height: 100px; background-color: #90EE90;"></div>

    <script>
        var clickCount = 0; // 点击计数
        var clickTimer = null; // 计时器

        document.getElementById('clickableDiv').addEventListener('click', function() {
            clickCount++; // 增加点击计数
            if (clickTimer === null) {
                // 如果计时器为空，则设置一个计时器
                clickTimer = setTimeout(function() {
                    // 根据点击次数执行操作
                    if (clickCount === 1) {
                        console.log('单击');
                    } else if (clickCount === 2) {
                        console.log('双击');
                    } else if (clickCount >= 3) {
                        console.log('三击');
                    }
                    // 重置计数和计时器
                    clickCount = 0;
                    clearTimeout(clickTimer);
                    clickTimer = null;
                }, 400); // 设定时间间隔为400毫秒，你可以根据需要调整这个值
            }
        });
    </script>
</body>
</html>

酸菜且多余

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js单击/双击/三击，长按/单击

之前写项目的时候遇到了一个这样的需求，对于页面上的一个元素做单击/长按，触发不同事件，后面考虑到鲁棒性还是换成单击/双击/三击的形式了，不过这些事件之间的区分给人的印象还是深刻的（其实就是卡在这里太久了，乐），写篇文章记录一下。
复制链接

扫一扫