How do I disable right click on my web page?

web-development

javascript

html

best-practices

byAlex Kataev·Sep 8, 2024

// Who needs right clicks anyway? Not us!
document.addEventListener('contextmenu', event => event.preventDefault());

This one-liner will block the context menu on right-click events.

Taking a deep dive into the right-click challenge

Is disabling right-click the appropriate solution for you? Let's delve into the guiding principles and potential scenarios impacting this decision.

Considerations and scenarios leading to the right-click blockade

I have content to protect!

You might believe that disabling right-click would act as a protective shield for your images and codes. Alas, content still remains accessible via browser developer tools or by inspecting page source—much to the dismay of right-click guardians.

User experience: A zoomed-out perspective

Remember, if you block a path, users will eventually find another route or simply leave. Restricting right-click might tick off users who frequently utilize the context menu for innocent journeys—like opening a link in a new tab.

The gaming world: Our reality is different

Interactive web applications or games might benefit from a right-click blockade. In such a matrix, a right-click could activate a weapon, power, or strategy—rather than pop up a menu.

Paths less traveled: Alternative approaches to disabling right-click

Spice it up: Custom context menus

Revolutionize the norm. Instead of completely revoking the right-click permit, design custom context menus. Menu options can be curated to add value to your website or application and spark joy in your users.

User doesn't always equate to perpetrator: Conditional logic for right-clicks

With JavaScript, create a conditional logic for the "contextmenu" event. Punish where punishment is due.

// Evaluating innocence...
document.addEventListener('contextmenu', function(event) {
  if (oughtToDisableRightClick(event.target)) {
    // Guilty as charged!
    event.preventDefault();
  }
});

Specific elements: Targeted attacks

Safeguard selected HTML elements with a targeted approach. Add the .no-right-click class to disable right-clicking on specific components.

// Classifying threats...
document.querySelector('.no-right-click').addEventListener('contextmenu', event => event.preventDefault());

Unforeseen hindrances: Potential limitations to note down

Browsers carry their own constitution. Browser settings can permit users to overrule your right-click block mandate.
"JavaScript Disabled" users remain unreachable, unaffected by your right-click prohibition.
Keyboard shortcuts and mobile interactions too have their secret passageways to bypass your restrictions.

Pros and Cons: The scales of decision-making

Your website's mission must balance on the scales alongside the constraints. It's best to ponder whether blocking right-click adds genuine value or merely adds to the visitor's annoyance.

Appeal vs Functionality: Find your balance

Prioritize between a polished UI and useful interaction. Make sure not to extinguish user functionalities whilst striving for visual perfection.

An HTML-level plot: Simple yet effective

Apply oncontextmenu="return false;" directly to the <body> tag or specific elements for a direct, HTML only approach.

<body oncontextmenu="return false;">

jQuery wisdom: A swift solution

If you're armed with jQuery, the bind method swiftly blocks the right-click event:

// Silencing right-click globally; hope you're left-handed!
$(document).bind('contextmenu', function(e) {
    e.preventDefault();
});

explain-codes / Web development / How do I disable right click on my web page?

Linked

Preventing an image from being draggable or selectable without using JS



Access event to call preventdefault from custom function originating from onclick attribute of tag



Prevent tabstop on A element (anchor link) in HTML



Html/css: Make a div "invisible" to clicks?



How do I disable a `href` link in JavaScript?



What's the difference between event.stopPropagation and event.preventDefault?



How to disable HTML links



Taking a deep dive into the right-click challenge Considerations and scenarios leading to the right-click blockade Paths less traveled: Alternative approaches to disabling right-click Unforeseen hindrances: Potential limitations to note down Pros and Cons: The scales of decision-making