使用 PointerEvents 在同一目标上检测两个手指触摸

Posted 2023-02-24

【中文标题】使用 PointerEvents 在同一目标上检测两个手指触摸

【英文标题】：Detect two finger touch with PointerEvents on the same target

【发布时间】：2018-06-20 19:37:58

【问题描述】：

我的屏幕（画布）上有很大的 html 元素，我想检测多点触控事件。 使用“touchstart”你有“touches”属性，但使用 PointerEvents 我不知道有什么方法可以知道是否发生了多点触控（除了检查是否有超过 1 个目标，这在屏幕上有大元素时显然是不可能的。 有没有可能？

一些代码说明：

canvas.addEventListener("pointerdown", (e) => 
    // is pointer down is multitouch?
);

VS.

canvas.addEventListener("touchstart", (e) => 
    console.log(e.touches.length);
);

非常感谢:)

【问题讨论】：

只是评论说 HammerJS 可能会帮助您完成此任务。我不熟悉原生的 touchevents，但发现 HammerJS 非常易于使用：hammerjs.github.io

【参考方案1】：

使用 PointerEvent，您必须在 pointerdown 上缓存事件并在 pointerup 上取消缓存。

我想说的只是复制 MDN 已有的确切示例：https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Multi-touch_interaction

【讨论】：

MDN 解决方案有效——但是——系统中断（例如模式弹出框）或父/子元素捕获pointerup 事件以防止缓存处理指针是可能的。这会破坏缓存，因此它将永远指示屏幕上的手指数量多于实际手指数量。建议添加一个 clearCache 函数，您可以调用某种手势“取消”用户输入（如点击按钮）。