jquery 双击

jQuery 双击事件绑定

使用 jQuery 的 dblclick() 方法可以监听元素的双击事件。语法如下：

$(selector).dblclick(function(){
  // 双击时执行的代码
});

示例代码

为按钮绑定双击事件并弹出提示：

$("#myButton").dblclick(function(){
  alert("按钮被双击了！");
});

动态绑定与解绑

通过 on() 和 off() 实现动态绑定和解绑：

// 动态绑定
$("#element").on("dblclick", function(){
  console.log("双击触发");
});

// 解绑
$("#element").off("dblclick");

阻止默认行为

在事件处理函数中调用 event.preventDefault() 可阻止默认行为：

$("#link").dblclick(function(event){
  event.preventDefault();
  console.log("阻止链接跳转");
});

双击与单击事件冲突处理

通过延迟判断区分单击和双击：

let clickTimer = null;
$("#target").click(function(){
  clearTimeout(clickTimer);
  clickTimer = setTimeout(function(){
    console.log("单击事件");
  }, 300);
}).dblclick(function(){
  clearTimeout(clickTimer);
  console.log("双击事件");
});

注意事项

• 双击事件间隔时间由操作系统设置决定，通常为 300-500ms。
• 移动端需考虑 touchstart 和 touchend 的兼容性处理。