[常用函数]模拟单击双击

小程序需要模拟双击事件，如果一个元素既绑定了单击事件，又绑定了模拟的双击事件，如何区分两个事件何时触发呢？

 

1. 设计一个点击事件分发函数

如果用户两次点击的时间间隔不大于300ms，认为发生了双击行为。

当用户点击一次后，等400ms，如果用户没有发生第二次点击，则认为是单击

export function useClickDispatch(fn: ClickFn, ctx?: any) {
  const { click, dbclick } = fn;
  let lastClickTime = 0;
  let timer: NodeJS.Timer;
  return (...args: any[]) => {
    // 清除单击事件
    clearTimeout(timer);
    const currentTime = Date.now();
    const gap = currentTime - lastClickTime;
    // 触发双击事件
    if (gap > 0 && gap < 300) {
      return dbclick?.apply(ctx, args);
    }
    lastClickTime = currentTime;
    // 400ms后触发单击事件
    return (timer = setTimeout(() => {
      click?.apply(ctx, args);
    }, 400));
  };
}

// ------ types ------
export interface ClickFn {
  click?: Function; // 单击事件
  dbclick?: Function; // 双击事件
}

 

2. 使用函数进行单击双击事件分发

下面是vue中的例子：

HTML 代码：

<template>
  <div @click="onClick">需要点击的元素</div>
</template>

javascript代码：

export default Vue.extend({
  data() {
    return {
      clickDispatch: null as any,
    };
  },
  created() {
    this.clickDispatch = useClickDispatch({ click: this.click, dbclick: this.dbclick }, this);
  },
  methods: {
    onLikeClick(e: any) {
      this.clickDispatch?.(e);
    },
    dbclick(e: any) {
      // 这里写双击需要处理的函数
    },
    click(e: any) {
      // 这里写单击需要处理的函数
    },
  },
});
</script>