如何在use-gesture/react中使用鼠标右键事件

Question

当我在网格上使用反应使用手势中的绑定功能时，网格上的鼠标按下事件将被绑定事件覆盖。并且 usegesture 仅接受左键单击事件。

我尝试在网格上添加 mousedown 事件，但没有成功

Answer 1

我可以通过使用事件上的按钮属性来使其工作。就我而言，我使用的是

useGesture

钩子，如下所示：

const bind = useGesture({
  onMouseDown: (state: any) => {
    if (state.event.button === 2) {
      // right click behavior
    } else {
      // any other button
    }
  }
});

我在他们的文档中找不到示例，但我确实找到了名为

pointer.buttons

here 的配置部分，可用于拖动配置。文档提到，这允许通过左键单击以外的按钮触发拖动，并且具有指向 MDN Web 文档，MouseEvent：按钮属性的链接。由于

useGesture

将事件以

state.event

的状态传回，因此我们可以通过检查

state.event.button

的值来检测使用了哪个鼠标按钮。

这是可能的按钮值的列表：

0: No button or un-initialized
1: Primary button (usually the left button)
2: Secondary button (usually the right button) ⬅️
4: Auxiliary button (usually the mouse wheel button or middle button)
8: 4th button (typically the "Browser Back" button)
16 : 5th button (typically the "Browser Forward" button)