当前位置：首页 > JavaScript

js实现双击

2026-03-15 00:47:09JavaScript

双击事件实现方法

在JavaScript中实现双击功能可以通过监听dblclick事件或结合click事件计时实现。以下是两种常见方法：

方法1：使用原生dblclick事件

js实现双击

element.addEventListener('dblclick', function(event) {
    console.log('双击事件触发');
    // 双击后的逻辑代码
});

方法2：手动实现双击检测（适用于需要自定义间隔时间的情况）

js实现双击

let lastClickTime = 0;
const doubleClickThreshold = 300; // 双击间隔阈值（毫秒）

element.addEventListener('click', function() {
    const currentTime = new Date().getTime();
    if (currentTime - lastClickTime < doubleClickThreshold) {
        console.log('自定义双击事件触发');
        // 双击逻辑
        lastClickTime = 0; // 重置
    } else {
        lastClickTime = currentTime;
    }
});

注意事项

浏览器默认的双击间隔时间约为300-500ms，不同操作系统可能有所差异
双击事件会先触发两次单击事件，再触发双击事件
移动端可能需要使用touchstart事件替代

阻止默认行为

如需阻止浏览器默认的双击选中文本行为：

element.addEventListener('dblclick', function(e) {
    e.preventDefault();
    // 其他逻辑
});

实际应用示例

实现一个元素双击放大效果：

const box = document.getElementById('box');
box.addEventListener('dblclick', function() {
    this.style.transform = this.style.transform === 'scale(1.5)' 
        ? 'scale(1)' 
        : 'scale(1.5)';
});