jquery 双击

jQuery 双击事件绑定

使用 jQuery 的 dblclick() 方法可以为元素绑定双击事件。该方法接受一个回调函数，当用户双击指定元素时触发。

$("#target").dblclick(function() {
    alert("双击事件触发");
});

双击与单击事件冲突处理

若同时存在单击和双击事件，可能会因事件冒泡导致意外触发。可通过延迟单击事件判断是否为双击：

var clickTimer = null;
$("#target").click(function() {
    clearTimeout(clickTimer);
    clickTimer = setTimeout(function() {
        // 单击逻辑
    }, 300);
}).dblclick(function() {
    clearTimeout(clickTimer);
    // 双击逻辑
});

自定义双击事件检测

手动检测两次点击的时间间隔实现自定义双击逻辑：

var lastClickTime = 0;
$("#target").click(function() {
    var currentTime = new Date().getTime();
    if (currentTime - lastClickTime < 300) {
        // 双击逻辑
        lastClickTime = 0;
    } else {
        lastClickTime = currentTime;
    }
});

双击事件对象属性

事件处理函数可接收 event 对象，包含双击相关信息：

$("#target").dblclick(function(event) {
    console.log("触发位置:", event.pageX, event.pageY);
    console.log("触发元素:", event.target);
});

动态元素双击绑定

对于动态生成的元素，使用事件委托绑定双击事件：

$(document).on("dblclick", ".dynamic-element", function() {
    // 处理逻辑
});

双击事件阻止冒泡

阻止双击事件向上传播到父元素：

$("#target").dblclick(function(event) {
    event.stopPropagation();
    // 处理逻辑
});