JS判断点击是单击还是双击

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

六卿

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

阅读量1.5k

点赞数 3

分类专栏： # js 文章标签： js html5 javascript es6

本文链接：https://blog.csdn.net/qq_43291759/article/details/118393129

版权

js 专栏收录该内容

97 篇文章 10 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击判断单击还是双击</title>
</head>

<body>
    <p>点击判断单击还是双击</p>
    <script>
        let p = document.getElementsByTagName('p')[0]
        //上一次 的定时器 返回的ID
        var lastTapTimeFunc
        //上一次时间戳 默认给0
        var lastTapDiffTime = 0
        const handClick = function () {
            let _this = this;
            //点击时时间戳
            let curT = new Date().getTime()
            //上一次时间戳
            let lastT = _this.lastTapDiffTime;
            //对上一次时间戳重新赋值
            _this.lastTapDiffTime = curT
            //做差
            let diff = curT - lastT
            //规定300ms内点击两下判断为双击
            if (diff < 300) {
                console.log("双击");
                //清除上一次单击的定时器ID
                clearTimeout(_this.lastTapTimeFunc)
            } else {
                //定时器id
                _this.lastTapTimeFunc = setTimeout(function () {
                    console.log("单鸡");
                }, 300)
            }
        }
        p.addEventListener('click', handClick)
    </script>
</body>

</html>