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

长悬浮

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>

参考文章

还在用定时器吗？借助 CSS 来监听事件

相关阅读:
若依-整合WebSocket
设计模式之组合模式
HTTP——
微软大中华区商业应用事业部高级产品经理张诗源，将出席“ISIG-低代码/零代码技术与应用发展峰会”
JSON与实体类之间的互相转换！！
Linux常见的命令操作
如何决定在创建利基（niche）站时选择中文站还是英文站
【metaRTC学习】metaRTC的demo运行说明（一）
玩转Vue3全家桶02丨上手：一个清单应用帮你入门Vue
使用Mybatis-plus清空表数据

原文地址：https://blog.csdn.net/weixin_44240581/article/details/126975104