Right Click, Text Select & Drag Disable Codes (HTML, JavaScript & jQuery)

Protecting your website content is important, and simple code snippets can help prevent unwanted copying and image theft. On this page, you will find ready to use HTML, JavaScript, and jQuery solutions to disable right click, text selection, link dragging, and image drag actions.

Contents

  1. Text Selection Disable
  2. Link Text Drag Disable
  3. Right Click Disable
  4. Right Click Alert Message
  5. Image Right Click Disable
  6. Image Right Click Alert Message
  7. Image Drag and Drop Silent Disable
  8. Image Drag and Drop Alert Message

1. Text Selection Disable Code

Use this method to stop users from selecting text on your webpage. It helps prevent copying of written content and improves content protection with a simple JavaScript or CSS script.

text selection disable
HTML & CSS
<style>
    body {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
</style>

<p>This text selection is disabled.</p>
Run codeTry it yourself

2. Link Text Drag Disable Code

This technique prevents users from dragging link text from your page. It is useful for avoiding unintentional dragging actions and keeping your page interactions clean and controlled.

link text drag disable
HTML
<a href="#" draggable="false">This link cannot be dragged</a>
Run codeTry it yourself

3. Right Click Disable Code

This method completely disables right click without showing any popup message. It silently stops the browser context menu from opening.

right click disable
JavaScript
document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
});
Run codeTry it yourself

4. Right Click Alert Message Code

When a user right-clicks on the page, an alert message appears. This version does not fully block the action but informs users that right click is disabled for page protection.

right click alert
JavaScript
document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
    alert("Right click is disabled on this page.");
});
Run codeTry it yourself

5. Image Right Click Disable Code

Disable right click on images without displaying any alert. This silent approach prevents image saving while maintaining a smooth user experience.

image right click disable
JavaScript
document.querySelectorAll("img").forEach(img => {
    img.addEventListener("contextmenu", e => e.preventDefault());
    // drag disable
    img.addEventListener("dragstart", e => e.preventDefault());
});
Run codeTry it yourself

6. Image Right Click Alert Message Code

Show an alert box when a user tries to right click on an image. It helps prevent image copying while clearly informing users that downloading or saving images is restricted.

image right click alert
JavaScript
// HTML image
// <img src="image.jpg" class="protect-img" alt="">

document.querySelectorAll(".protect-img").forEach(img => {
    img.addEventListener("contextmenu", function (e) {
        e.preventDefault();
        alert("Right click on images is disabled.");
    });
    // drag disable
    img.addEventListener("dragstart", e => e.preventDefault());
});
Run codeTry it yourself

7. Image Drag and Drop Silent Disable Code

Stop image dragging without showing alerts. This simple code silently prevents users from dragging pictures off the page, keeping your images protected without interruptions.

image grag disable
JavaScript
document.querySelectorAll("img").forEach(img => {
    img.addEventListener("dragstart", function (e) {
        e.preventDefault();
    });
});
Run codeTry it yourself

8. Image Drag and Drop Alert Message Code

This method blocks users from dragging images and display an alert message.

image drag alert
JavaScript
document.querySelectorAll("img").forEach(img => {
    img.addEventListener("dragstart", function (e) {
        e.preventDefault();
        alert("Image drag is disabled.");
    });
});
Run codeTry it yourself