Disable Right Click on Specific Area of a Website

**Nathan** · February 19, 2018

Last week we wrote a blog post on how to disable right click functionality on an entire website. Since then we've had a few requests on how you would apply this same method to a certain area, container or element on your website or webpage.

The code is almost identical, you just have to modify the listener so that it only fires based on certain CSS selectors.

Here's the entire page's code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Example of how to disable right click on specific sections of a website using Javascript and a Bootstrap Modal">
    <meta name="author" content="Projex">

    <title>Bootstrap and Javascript Right Click Disable Element Based Example | Prodjex Web Development and Consulting</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/pricing.css" rel="stylesheet">

    <style>
        body{background-color: grey;}
        p{color: #fff;}
    </style>
</head>

<body>

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
    <h5 class="my-0 mr-md-auto font-weight-normal"><img src="https://www.prodjex.com/wp-content/uploads/2017/10/dsmall.png"/></h5>
    <nav class="my-2 my-md-0 mr-md-3">
        <a class="p-2 text-dark" href="#">Features</a>
        <a class="p-2 text-dark" href="#">Enterprise</a>
        <a class="p-2 text-dark" href="#">Support</a>
        <a class="p-2 text-dark" href="#">Pricing</a>
    </nav>
    <a class="btn btn-outline-primary" href="#">Sign up</a>
</div>

<div id="disableRC" class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <div class="col-md-12">
        <h1 class="display-4">Right click here...</h1>
        <p class="lead">Example of how to disable right click on specific sections of a website using Javascript and a Bootstrap Modal.</p>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Warning</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Don't do that!
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">I Understand</button>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
    $('#disableRC').on('contextmenu', function () {
        $('#exampleModal').modal('show');
        return false;
    });
</script>

</body>
</html>

The code we've changed is within the JavaScript, instead of looking at the entire document, we're now only looking at firing the event if the right click happens within the "disableRC" element.

<script>
    $('#disableRC').on('contextmenu', function () {
        $('#exampleModal').modal('show');
        return false;
    });
</script>

You can check out the demo here.

View the Prodjex Web Development Blog post on How to Disable Right Click on Specific Area of a Website.

Sign In

Disable Right Click on Specific Area of a Website

Recommended Posts

Nathan

Link to comment

Share on other sites

Join the conversation

Our Network

Quick Links

About Us

Browse

Activity