不会阻止新上下文菜单事件的材质 UI 上下文菜单？

Question

Material UI文档给出了如何构建上下文菜单的示例。但是当这个菜单打开时，页面的所有元素似乎都停止接收onContextMenu事件。因此，如果在菜单打开时在菜单外右键单击，应用程序将无法识别被单击的内容，也无法重新定位菜单。唯一的选择是先关闭菜单(例如，在菜单外左键单击(，然后右键单击所需的元素。

如何创建一个菜单，使其在打开时仍然可以识别页面中哪些元素被右键单击，并将菜单重新定位到新单击的位置？

(请参阅这个Codesandox，它是对文档中的示例的轻微修改，其中添加了第二个div，您可以右键单击它(

Answer 1

找到了解决方案！诀窍是在父div的鼠标按下事件上关闭上下文菜单，并在菜单上设置出口transitionDuration为0。例如，请参阅此demo.tsx(也在Codesandox上(：

import React from "react";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";
const initialState = {
mouseX: null,
mouseY: null
};
export default function ContextMenu() {
const [state, setState] = React.useState<{
mouseX: null | number;
mouseY: null | number;
}>(initialState);
const handleClick = (
divName: string,
event: React.MouseEvent<HTMLDivElement>
) => {
console.log(divName);
event.preventDefault();
setState({
mouseX: event.clientX - 2,
mouseY: event.clientY - 4
});
};
const handleClose = () => {
setState(initialState);
};
return (
<div
onContextMenu={e => e.preventDefault()}
onMouseDownCapture={e => {
if (e.button === 2) handleClose();
}}
>
<Menu
keepMounted
open={state.mouseY !== null}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={
state.mouseY !== null && state.mouseX !== null
? { top: state.mouseY, left: state.mouseX }
: undefined
}
transitionDuration={0}
>
<MenuItem onClick={handleClose}>Copy</MenuItem>
<MenuItem onClick={handleClose}>Print</MenuItem>
<MenuItem onClick={handleClose}>Highlight</MenuItem>
<MenuItem onClick={handleClose}>Email</MenuItem>
</Menu>
<div
onContextMenu={e => handleClick("div1", e)}
style={{ cursor: "context-menu" }}
>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum
purus, bibendum sit amet vulputate eget, porta semper ligula. Donec
bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor
sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula.
Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum
orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices,
metus metus finibus ex, sit amet facilisis neque enim sed neque.
Quisque accumsan metus vel maximus consequat. Suspendisse lacinia
tellus a libero volutpat maximus.
</Typography>
</div>
-----
<div
onContextMenu={e => handleClick("div2", e)}
style={{ cursor: "context-menu" }}
>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum
purus, bibendum sit amet vulputate eget, porta semper ligula. Donec
bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor
sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula.
Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum
orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices,
metus metus finibus ex, sit amet facilisis neque enim sed neque.
Quisque accumsan metus vel maximus consequat. Suspendisse lacinia
tellus a libero volutpat maximus.
</Typography>
</div>
</div>
);
}