OscarminiOscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook Twitter Instagram
  • Advertise With Us
  • Newsletter
Facebook Twitter Instagram
Oscarmini Oscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
OscarminiOscarmini
Home»Web Design Tips»3 Methods To Disable Right Click On A WebPage – CSS, Javascript and HTML
Web Design Tips

3 Methods To Disable Right Click On A WebPage – CSS, Javascript and HTML

Oscar FrankBy Oscar Frank3 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

There’s no doubt that since the inception of the internet, the fight against content theft has always been on the increase as content thieves are always on the rise.

how to disable right click

In this short tutorial, I’ll be guiding you through a set of ways you can easily disable right click on your website, blog or webpage using any of the methods below.

  • Must Read: How To Stop Framing Site From Stealing Your Content

Before we continue, one thing you should bear in mind is that disabling right click can be useful in some websites and become useless for others. For instance, disabling right click on this blog (oscarmini.com) would do more harm than good as many people won’t be able to copy various codes I’ve given out here. So use this function wisely.

Below, you’ll learn how to disable right click using JavaScript, CSS and HTML body tag

Disabling Right Click Using HTML Body Tag

After you must have designed a webpage let’s say using DreamWeaver, it is very much easy to disable right click by means of adding oncontextmenu handler in body tag of webpage.

When you view the source code of your newly designed webpage, search for <body>, add the oncontextmenu handler to it as
<body oncontextmenu=”return false;” >

[pastacode lang=”markup” manual=”%20%3Cbody%20oncontextmenu%3D%22return%20false%3B%22%3E” message=”Disable Right Click In HTML” highlight=”oncontextmenu=”return false;”” provider=”manual”/]

Then Save. It works like charm, your content would be more secured as right click would be disabled.

Disabling Right Click Using CSS

This is another pretty easy method you can use in disabling right click. One thing I like about this method is that people barely know that CSS can disable text selection and might not be able to find ways to outsmart this method unlike the Javascript method.

As much as we know that we are not necessarily disabling right click here, we are disabling the ability to select text using the the user-select CSS property, thus on right click, you won’t see the copy option. In this method, I’m assuming that the CSS region you wish to disable right click is specified as a body  in your CSS (body). You can as well add the below CSS properties to any class name you wish. When this method is combined with any other methods, users won’t be able to either select text or right click. It’s up to you to choose if you’d combine or use this alone. Below is the CSS snippet to add to your CSS code to disable right click.

[pastacode lang=”css” manual=”body%20%7B%0A-webkit-user-select%3A%20none%3B%C2%A0%20%2F*%20Chrome%20all%20%2F%20Safari%20all%20*%2F%0A-moz-user-select%3A%20none%3B%C2%A0%C2%A0%C2%A0%C2%A0%20%2F*%20Firefox%20all%20*%2F%0A-ms-user-select%3A%20none%3B%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%2F*%20IE%2010%2B%20*%2F%0A-o-user-select%3A%20none%3B%0Auser-select%3A%20none%3B%0A%7D” message=”Disable Select Using CSS” highlight=”” provider=”manual”/]

Add it to your site’s CSS file and save. You won’t be able to see copy whenever you right click.

Disabling Right Click Using Javascript

Using Javascript to disable right click is one of the widely used methods around the web. I actually don’t prefer this method as content thieves can easily outsmart this method by disabling Javascript on their web browsers. 

Simply add the below code to the head section of your HTML code.

[pastacode lang=”javascript” manual=”%3Cscript%3E%0Adocument.addEventListener(‘contextmenu’%2C%20event%20%3D%3E%20event.preventDefault())%3B%0A%3C%2Fscript%3E” message=”Disable Right Click With Javascript” highlight=”” provider=”manual”/]

I hope you find this guide useful. Feel free to let us know any problems you encountered using the comment box below.

Get the most important happenings in your inbox weekly

CSS Disable Right Click HTML Javascript webdesign Webdesign Tips

Related Posts

WordPress Blog Hosting made easy with SeekaHost Blog Hosting Control Panel

December 4, 2020

How to Create a Website with Elementor Page Builder in WordPress

April 1, 2019

20 Things You Didn’t Know About Javascript

March 28, 2019
View 14 Comments

14 Comments

  1. MATRIX on February 27, 2014 5:07 pm

    Nicw one oscar, i prefer that . Thanks for dropping this tutorial.

    Reply
    • Oscar Frank on February 27, 2014 10:39 pm

      You are welcome man. Thanks for coming by.

      Reply
  2. ebimablog on March 3, 2014 8:39 pm

    Good one from you sir,but there is alway a way out for the smart ones

    Reply
    • Oscar Frank on March 4, 2014 9:14 pm

      Sure, there are ways out Ige. But not everyone who visits your blog is a geek anyway.

      Reply
  3. naira4naija on March 12, 2014 5:00 pm

    nice post oscar,it works for me

    Reply
    • Oscar Frank on March 13, 2014 10:24 pm

      Glad to know it did work for you. Thanks for dropping by.

      Reply
  4. tanaka on July 25, 2014 10:58 pm

    Hi,

    -ms-user-select: none; /* IE 10+ */

    So how about users that are using IE9 or IE 8?

    Reply
  5. #KM9 acne Info and treatment on October 11, 2014 8:41 pm

    What’s up, yeah this article is in fact fastidious and
    I have learned lot of things from it on the topic of blogging.
    thanks.

    Reply
  6. Razvan on November 19, 2015 1:43 pm

    I have inages with the class “.mfp-img”.

    In my css fle I have written:

    .mfp-img {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    -o-user-select: none;
    }

    Yet, I can still right click and save images. See this jsfiddle: http://jsfiddle.net/3dy8s5gL/4/.

    What am I doing wrong?

    Thx!

    Reply
  7. jane on July 1, 2016 2:10 pm

    its does not work.

    Reply
  8. Nilla's Photography on December 13, 2018 4:53 pm

    This does not work.

    Reply
    • Oscar Frank on December 15, 2018 6:59 am

      Which doesn’t exactly work for you?

      Reply
  9. Andre on April 5, 2019 12:33 pm

    You have to put it right on top of the page before <?php starts
    Example :

    document.addEventListener(‘contextmenu’, event => event.preventDefault());

    Reply
  10. Andre on April 5, 2019 12:41 pm

    I have used the right on top, before starting my php script as to prevent my visitors from downloading my music from my site as I am busy developing a web based AUTO DJ script for PODCASTING schedules, rotations, adverts, jingles which works without a shoutcast server, Icecast server or any other Auto DJ software. It works on any WEBSITE. This helped me a lot. Thanks …

    Reply

Leave A Reply Cancel Reply

Latest Posts

Curacel, a Nigerian Insurtech Startup, Raises $3 Million

February 17, 2023

Google Redesigns and Upgrades Gboard Toolbar

February 16, 2023

Internet Explorer to be Permanently Disabled

February 16, 2023

iPhone 15 Pro to Feature Thinner Bezels

February 16, 2023
Get the best African tech newsletters in your inbox
Oscarmini
Facebook Twitter Instagram YouTube
© 2023 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.