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 5 · Answer 1 · 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

answered Apr 08 '20 at 22:23

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

1 Answers1