浏览器没有鼠标连击事件，那我们自己造

前端西瓜哥

发布于 2024-06-27 14:56:58

10900

代码可运行

文章被收录于专栏：前端西瓜哥的前端文章

运行总次数：0

代码可运行

大家好，我是前端西瓜哥。

最近做了编组功能，整个图形编辑器的基本功能都需要重写，比如选中逻辑。

其中需要实现这么一个功能。

在某个图形上双击。

如果当前处于没有选中图形的状态，对于最顶层的组，对它们的直接子图形数组从上往下遍历，找出命中 hitTest 的图形，将其设置为选中状态。

这时子图形处于选中状态，如果这个子图形也依旧还是组对象，我们 再双击，再选中其下命中 hitTest 的子图形。依此递归。

然后我发现了一个问题。

我用的是浏览器原生的双击事件（dblclick），如果连续点击超过了两次，是无法触发多次双击事件，实现丝滑快速地自顶向下不断选中子元素的效果。

双击事件是有冷却时间的，需要停顿一段时间才能进入下一次双击事件。

如果你在极短的时间内点击了很多次，不好意思，只能触发了一次双击事件。

模拟实现连击事件

于是，我们需要一个连击事件。

浏览器不提供，我们就自己实现。

调试观测了一段事件，实现这么一个连击事件需要注意一下几点：

必须是鼠标左键点击，忽略中键和右键；
考虑两次点击的最大间隔 maxGap，看用户的操作的灵活度，目前我随意选了个 350 毫秒，300 到 500 毫秒之间应该就差不多了；
考虑两次点击的点击位置误差，目前我设置误差为 5 像素。不能为 0，因为手指在用一定力度敲击鼠标左键时，是会让鼠标发生些微抖动，导致位置发生变化，但通常不大。

实现

记录每次 mousedown 事件的时间戳，以及光标位置，这里记录了 pageX 和 pageY 位置。

计算两次事件的时间差和位置差，看看是否在允许的范围内。

如果在，触发 “连击事件”，否则不触发。

let pointerDownTimeStamp = -Infinity;
let lastPointerDownPos: IPoint = { x: -99, y: -99 };

// 可做成配置
const continueClickMaxGap = 350;
const continueClickDistanceTol = 5;

const onMousedown = (event: PointerEvent) => {
  // 鼠标左键
  if (event.button === 0) {
    const now = new Date().getTime();
    const newPos = {
      x: event.pageX,
      y: event.pageY,
    };

    const interval = now - pointerDownTimeStamp;
    const clickDistanceDiff = distance(newPos, lastPointerDownPos);
    // 如果都在范围内，触发 “连击事件
    if (
      interval < continueClickMaxGap &&
      clickDistanceDiff < continueClickDistanceTol
    ) {
      eventEmitter.emit('continueClick', event);
    }
    pointerDownTimeStamp = now;
    lastPointerDownPos = newPos;
  }
};

canvas.addEventListener('mousedown', onMousedown)

换成连选后，效果就变得非常丝滑了。见下图。