CODEWITHSUNDEEP
javascriptreactjsmobilecontextmenu
Patrick Johnson
Patrick Johnson

Reputation: 43

ReactJS - Disable Click & Hold for Context menu for mobile without disabling click events?

I'm making a game in ReactJS where I'm using a long press event to perform certain actions in the game (using react-click-n-hold for long press events). When I do these actions on a mobile browser, it always brings up the context menu. How can I disable the context menu on mobile without disabling my click and long press events?

Upvotes: 3

Views: 3056

Answers (2)

Tim-Snugget
Tim-Snugget

Reputation: 9

Kinda late to the topic I found the holdToDisplay flag of the ContextMenuTrigger element reading the API.
Basically, if you set the flag to -1, the trigger is disabled if you hold the click (set to 1000ms by default).

<ContextMenuTrigger id='menu_id' holdToDisplay={-1}>
  // ...
</ContextMenuTrigger>

Although I admit I haven't tested on mobile browsers.
Hope it helps future readers

Upvotes: 0

CHues
CHues

Reputation: 170

<div onContextMenu={(e)=> e.preventDefault()}... />

This solution from Max Svid worked for me

https://stackoverflow.com/a/56328162/12722618

Upvotes: 6

Related Questions