js实现双击事件时不触发单击事件

方式1：此方法适用于PC端，一般移动端不支持双击事件

<div onclick="handleRefresh()" ondblclick="handleShowVConsole()"></div>

var timer = null;
function handleRefresh() {
  timer = setTimeout(() => {
    // 单击事件要执行的代码
    console.log('单击');
  }, 300);
}
function handleShowVConsole(e) {
  clearTimeout(timer);
  // 双击事件要执行的代码
  console.log('双击');
}

方式2：PC端、移动端兼可使用

双击事件使用单击事件模拟

<div onclick="customClick()"></div>

var clickTime = 1;
var timer = null;
function handleOnClick() {
  console.log("单击");
}
function handleDbClick() {
  console.log("双击");
}
function customClick() {
  clearTimeout(timer);
  if (clickTime === 1) {
    clickTime++
    timer = setTimeout(() => {
      clickTime = 1
      // 单击
      handleOnClick();
    }, 300)
  } else if (clickTime === 2) {
    clickTime = 1
    // 双击
    handleDbClick();
  }
}