js双击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Click Example</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div id="box">Double Click Me!</div>

    <script>
        const box = document.getElementById('box');

        box.addEventListener('dblclick', function() {
            if (box.style.backgroundColor === 'lightblue') {
                box.style.backgroundColor = 'lightgreen';
                box.textContent = 'Clicked!';
            } else {
                box.style.backgroundColor = 'lightblue';
                box.textContent = 'Double Click Me!';
            }
        });
    </script>
</body>
</html>

let clickTimer = null;

element.addEventListener('click', function() {
    if (clickTimer !== null) {
        clearTimeout(clickTimer);
        clickTimer = null;
        // 处理双击事件
        handleDoubleClick();
    } else {
        clickTimer = setTimeout(() => {
            clickTimer = null;
            // 处理单击事件
            handleClick();
        }, 200); // 200毫秒的延迟
    }
});