不用定时器，实现鼠标长悬浮和鼠标长按监听

等下吃什么？

已于 2022-09-21 16:17:40 修改

阅读量372

点赞数

分类专栏：前端文章标签：前端

于 2022-09-21 16:17:05 首次发布

本文链接：https://blog.csdn.net/weixin_44240581/article/details/126975104

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

长悬浮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长悬浮</title>

    <style>
        #hoverBox {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        #hoverBox:hover {
            opacity: 0.999;            /* 无关要紧的样式 */
            transition: 0s 1s opacity; /* 延时1s */
        }
    </style>
</head>
<body>
    <div id="hoverBox"></div>
</body>
</html>

<script>
    // let timer = null;
    // document.querySelector('#hoverBox').addEventListener('mouseover', function (e) {
    //     timer = setTimeout(() => {
    //         console.log('停留1s');
    //         clearTimeout(timer);
    //     }, 1000)
    // })
    // document.querySelector('#hoverBox').addEventListener('mouseout', function (e) {
    //     clearTimeout(timer);
    // })


    // 过渡结束时间 = 过渡时间 + 延迟时间
    document.querySelector('#hoverBox').addEventListener('transitionend', function (e) {
        console.log('停留1s');
    })
</script>

长按

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长点击</title>

    <style>
        #hoverBox {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        #hoverBox:hover:active {
            opacity: 0.999;            /* 无关要紧的样式 */
            transition: 0s 3s opacity; /* 延时1s */
        }
    </style>
</head>
<body>
    <div id="hoverBox"></div>
</body>
</html>

<script>
    // let timer = null;
    // document.querySelector('#hoverBox').addEventListener('mousedown', function (e) {
    //     timer = setTimeout(() => {
    //         console.log('停留3s');
    //     }, 3000)
    // })
    // document.querySelector('#hoverBox').addEventListener('mouseup', function (e) {
    //     clearTimeout(timer)
    // })


    // 过渡结束时间 = 过渡时间 + 延迟时间
    document.querySelector('#hoverBox').addEventListener('transitionend', function (e) {
        console.log('停留3s');
    })
</script>