ondblclick 属性可直接使用但需满足同一位置、300ms内连续两次单击才触发;推荐用 addeventlistener('dblclick') 绑定,注意其与 click 事件独立且顺序为 click→dblclick;移动端不支持原生 dblclick,需自行实现或改用长按。

ondblclick 属性能直接用,但要注意触发条件
ondblclick 是 HTML 原生支持的事件属性,写在按钮标签里就能响应双击,比如:<button ondblclick="console.log('双击了')">点我</button>。但它有个关键限制:必须在**同一位置、短时间内连续两次单击**才算双击——如果第一次点击后鼠标移开或停顿太久(通常 > 300ms),第二次点击就只会触发 onclick,不会触发 ondblclick。
常见错误是误以为“快速连点两下”就一定触发,结果发现有时只执行一次 onclick。这是因为浏览器对双击有防抖判断,且焦点、鼠标移动都会干扰识别。
用 addEventListener 绑定更可控
推荐用 JS 的 addEventListener 替代内联 ondblclick,便于维护和调试:
const btn = document.querySelector('button');
btn.addEventListener('dblclick', () => {
console.log('双击生效');
});
注意事件名是 dblclick(不是 doubleclick 或 ondblclick),且它和 click 是两个独立事件——双击时会先触发一次 click,再触发 dblclick。如果你同时监听两者,要小心逻辑冲突,比如:
- 不要在
click里做耗时操作(如发请求),否则可能卡住dblclick触发 - 必要时可在
click中用setTimeout加防抖,避免单击/双击行为混杂
移动端没有真正的双击事件
手机浏览器默认不支持 dblclick,因为触摸屏上双击常被用于缩放页面。即使你写了 ondblclick 或监听 dblclick,大多数安卓/iOS WebView 都不会触发。
如果真需要移动端双击响应,得自己实现:监听 touchstart,记录时间戳和坐标,两次间隔 且位置偏差 <code> 才算双击。但这容易和系统手势冲突,也增加误触风险。
更稳妥的做法是:放弃双击,改用长按(touchstart + setTimeout)或额外按钮。
别忽略 click 和 dblclick 的执行顺序与取消
双击时,浏览器会按顺序触发:mousedown → click → mouseup → mousedown → click → mouseup → dblclick。也就是说,dblclick 总是在两个 click 之后才发生。
如果你在 click 处理函数中调用了 event.preventDefault() 或 return false,它**不会阻止后续 dblclick 触发**;但若在 mousedown 阶段就 preventDefault(),可能影响整个点击链。
真正想“禁用双击”,只能移除 dblclick 监听器,或者在 handler 里加开关变量手动拦截——靠阻止冒泡或默认行为是拦不住的。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











