自定义上下文菜单在移动设备上不起作用

Question

我有一个使用 NextJS 构建的聊天应用程序，我正在尝试添加自定义上下文菜单来固定、收藏或删除消息。到目前为止，这是我的代码：

const [isContextClicked, setIsContextClicked] = useState<boolean>(false);

const handleContextMenu = async (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
  event.preventDefault();
  setIsContextClicked(true);
};

return (
  <div className='chat-message' onContextMenu={handleContextMenu}>
    ...
    {isContextClicked && (
      <CustomContextMenu ... />
    )}
  </div>
);

到目前为止，这在计算机上有效 - 当我右键单击聊天消息时，会显示自定义上下文菜单，并且我可以固定、收藏或删除消息。不幸的是，当我在 iPhone 上通过单击并按住聊天消息来尝试它时，自定义上下文菜单没有显示 - 文本被选中并突出显示，而不是允许我复制等。我认为这是移动设备的默认行为.

我也尝试过：

return (
  <div className='chat-message' onClick={handleContextMenu} onContextMenu={handleContextMenu}>
    ...
    {isContextClicked && (
      <CustomContextMenu ... />
    )}
  </div>
);

因此，如果我单击聊天消息，自定义上下文菜单也会显示，但我不确定为什么它不适用于桌面和移动设备。我需要进行哪些更改才能在桌面（通过右键单击）和移动设备（通过单击并按住）上显示我的自定义上下文菜单？

Answer 1

我也面临同样的问题，我认为这是因为我也在研究它，如果我找到一些解决方案，我也会将其发布在这里

(event: MouseEvent<HTMLDivElement,