Javascript 事件未注册右键单击事件(在 React 中)

Question

我正在 React 中做一个项目，我需要区分右键和左键点击，以及鼠标左键和右键。我对鼠标按下事件没有任何问题，但在单击事件方面遇到了大问题。

在我的 onMouseDown 处理程序中，我正在检查 event.button 以查看鼠标按下发生在鼠标左侧或右侧的天气(事件.button === 0 表示鼠标左下，事件.button === 2 表示鼠标右下(。这完全符合预期。

但是，完全相同的逻辑不适用于我的 onClick 处理程序上的单击事件;只有左键单击有效。实际上，当我尝试在单击时记录整个事件对象时，右键单击根本没有响应。就好像单击事件不适用于右键单击一样。

对于上下文，我已经关闭了我正在谈论的元素上的上下文菜单，因为这妨碍了我，但即使我允许上下文菜单正常使用，我也对右键单击事件没有运气。

这里有一些代码来向您展示我在说什么：

// Works perfectly
const handleMousedown = (e) => {
if (e.button === 0) {
setLeftMousedown(true);
// console.log(e.button);
}
if (e.button === 2) {
setRightMousedown(true);
// console.log(e.button);
}
};
*******************************
// Does NOT work for the right click, and the console.log at the top only fires at all on left clicks
const handleClick = (e, i, j) => {
console.log(e); // only registers for left click
if (e.button === 0) {
let gridCopy = JSON.parse(JSON.stringify(grid));
gridCopy[i][j].on = !gridCopy[i][j].on;
setGrid(gridCopy);
}
if (e.button === 2) {
console.log('rightclick');
let gridCopy = JSON.parse(JSON.stringify(grid));
gridCopy[i][j].wall = !gridCopy[i][j].wall;
setGrid(gridCopy);
}
};

任何想法为什么会发生这种情况，或者我如何注册与左键单击事件分开的右键单击事件？

Answer 1

单击事件不适用于鼠标右键。您应该使用鼠标向下或使用onContextMenu：https://stackoverflow.com/a/28656242/4949918

Answer 2

要右键单击，您需要设置onContextMenu道具

onContextMenu={this.handleClick}