How to Disable Mouse Right Click using jQuery

Content theft is a serious issue faced by many website / blog owners. This can be limited to a certain level by disabling right click on websites. Disabling mouse right-click will prevent the context menu from appearing, there by preventing the page contents from being copied. Although it is not recommended as the best practice, it is certainly feasible.

It is very easy to disable the right click on your site using jquery. You can do it at page level or element level. You have to capture and cancel the event inside the event handler. We will see how to do it.

jQuery - Disable Right Click Context Menu:

You can avoid copying the contents of your website in two ways. One is to disable the right-click context menu altogether and the other is to simply disable the cut, copy and paste operations.

1) To disable the right-click event on the entire web page, use this script,

<script type="text/javascript">
$(document).ready(function(){
    $(this).on('contextmenu', function(e){
        e.preventDefault();
    });
});
</script>

In the above script, the method on() attaches the 'contextmenu' event handler to the document. And the preventDefault() method prevents the default action of the element from happening; here it stops the context menu from showing up.

2) To disable context-menu on mouse right click only on part of the web page, use the element id, class or the element itself.

<script type="text/javascript">
$(document).ready(function(){
    $('#id').on('contextmenu', function(e){
        e.preventDefault();
    });
});
</script>

3) To disable right click context menu on the whole page but on the editable element like textarea, use this,

<script type="text/javascript">
$(document).ready(function(){
    $(this).on('contextmenu', function(e){
        if(e.target.nodeName != "TEXTAREA"){
            e.preventDefault();
        }
    });
});
</script>

Disable Cut, Copy & Paste on Webpage:

The first method will only stop users from copy pasting the contents using mouse. But they can still fire keyboard shortcuts such as CTRL+X (cut), CTRL+C (copy), CTRL+V (paste).

1) To disable just the cut, copy and paste features on your web page, use this,

<script type="text/javascript">
$(document).ready(function(){
    $(this).on('cut copy paste', function(e){
        return false;
    });
});
</script>

2) To disable cut, copy and paste operations on specific page elements, use this,

<script type="text/javascript">
$(document).ready(function(){
    $('#code').on('cut copy paste', function(e){
        return false;
    });
});
</script>

Read Also:

• How to Insert Images to Dropdown List with jQuery
• How to Create Animated Typing Effect using jQuery

That's a pretty nifty solution for disabling right click on the mouse. In jquery you can use both bind() and on() methods to attach the event handler to an element. Since 'bind' is deprecated from v3.0, use 'on' from here on. I hope this tutorial is useful for you. Please share it on your social circle if you like it.