Yogesh Chauhan's Blog

How to disable right click and drag and drop of images using jQuery?

in jQuery on May 7, 2021

Here are couple of ways I use to do that but there are many different ways to do the same.

Disable right-clicks on images

To disable right clicks on images, we can make use of .contextmenu() event. You can right click but it won’t show you the context menu.

This event binds an event handler to “contextmenu” JavaScript event. You can use this to trigger that event on an element as well.

When you right click on an element, the contextmenu event is sent to the element before the context menu is displayed.

Here’s how to do it:

This will disable right click on all images. If you just want to disable right click on a specific image, just change the selector.


Disable dragging of images

We can make use of .mousedown() event to disable dragging of images.

This event binds an event handler to “mousedown” JavaScript event. You can use this to trigger that event on an element as well.

When you bring the mouse pointer over any element and the mouse button is pressed, the mousedown event is sent to an element.

In the example above, you still can drag the image but can’t right click on it. (You can right click but it won’t show you the context menu.)

In the same example, let’s add the code to disable dragging of images.

This will disable dragging of all images. If you just want to disable dragging of a specific image, just change the selector.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to change HTML content on click using JavaScript?JavaScriptFlash of Invisible Text and Mitt Romney Web Font ProblemCSSJavaScript Data Types and Data Structures Things to RememberJavaScriptCONCAT and CONCAT_WS Functions in PostgresPostgresVariables scope and shadowing in SCSS (Sass)SCSSWordPress: How to display slider repeater fields in ACF?WordPress