双击事件怎么和点击事件不冲突？

シ利利提问于 2026-02-24 13:03:17 阅读 13

交互

我在做一个图片预览功能，想实现单击选中、双击放大。但加了 dblclick 之后，每次双击都会先触发一次 click，导致逻辑混乱。

试过用 setTimeout 延迟 click 判断，但感觉很卡，而且有时候还是会误触发。有没有更靠谱的处理方式？

element.addEventListener('click', () => {
  console.log('单击');
});
element.addEventListener('dblclick', () => {
  console.log('双击');
});

我来解答赞 4 收藏

反馈

1 条解答

博主子香 Lv1

推荐的做法是用一个标志位配合 setTimeout 来区分单击和双击，但关键是要在双击发生时主动清除单击的延迟回调，而不是让两个事件各自运行。

具体来说，双击事件触发时，浏览器会先发一次 click 再发一次 dblclick，所以不能靠事件顺序判断，得靠延迟处理 + 取消机制。

看个可用的写法：

let clickTimer = null;

let isDblClick = false;



element.addEventListener('click', (e) => {

  if (isDblClick) {

    isDblClick = false;

    return;

  }

  clickTimer = setTimeout(() => {

    console.log('单击');

    // 这里写单击逻辑，比如选中

    clickTimer = null;

  }, 300); // 延迟时间一般 250~300ms，和系统双击间隔一致

});



element.addEventListener('dblclick', (e) => {

  if (clickTimer) {

    clearTimeout(clickTimer);

    clickTimer = null;

  }

  isDblClick = true;

  console.log('双击');

  // 这里写双击逻辑，比如放大预览

});

注意这里用 isDblClick 是为了防止某些极端情况（比如快速点三下），但核心是 dblclick 里一定要 clearTimeout 掉之前的 click 延迟回调。

另外建议把延迟时间设成和系统双击间隔一致，比如 Windows 默认是 500ms，但前端一般用 300ms 就够了，体验更顺滑。

2026-02-24 13:07