Disable right click in React.js?

Question

I have the following element that I would like to prevent from being downloaded by disabling the right click.

<iframe src={TEST + "#toolbar=0"} width="100%" height="800px" 
onMouseDown={(e)=>e.preventDefault()} onContextMenu={(e)=>e.preventDefault()}/>

Unfortunately, when I right-click, it still brings up the context menu. Any idea why?

Does this answer your question? [Disable Right Click in React.JS](https://stackoverflow.com/questions/35043748/disable-right-click-in-react-js) — Zzirconium, Apr 08 '20 at 22:08
ok maybe that's because you are trying to bind events from an iframe. Have a look at https://stackoverflow.com/a/30399256/2143734 — Zzirconium, Apr 08 '20 at 22:19

score 7 · Answer 1 · answered Oct 20 '22 at 11:21

If you are using hooks then we can stop right click option in the following way

useEffect(() => {
        const handleContextmenu = e => {
            e.preventDefault()
        }
        document.addEventListener('contextmenu', handleContextmenu)
        return function cleanup() {
            document.removeEventListener('contextmenu', handleContextmenu)
        }
}, [ ])

score 5 · Answer 2 · edited Apr 09 '20 at 00:32

5

Use the contextmenu event inside componentDidMount() method of your component.

For example:

componentDidMount() {
  document.addEventListener('contextmenu', (e) => {
    e.preventDefault();
  });
};

This will prevent the context menu to be shown.

edited Apr 09 '20 at 00:32

j3ff

5,719
8
38
51

answered Apr 08 '20 at 22:23

Mohammed-yassin HAMDAOUI

59
2

This still didn't work. I think iframe might not be detecting any clicks because having the onClick function in iframe to a console log doesn't print anything. Any idea how to fix this? – Kayla Song Apr 08 '20 at 22:30
Check this, you will find the answer: https://stackoverflow.com/questions/16792953/onclick-function-doesnt-fire-on-iframe – Mohammed-yassin HAMDAOUI Apr 15 '20 at 15:30

Disable right click in React.js?

2 Answers2