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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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 JavaScript classes allows us to do less typing (syntactic sugar)?JavaScriptHow to pass arguments in SCSS function?SCSSThe SQL EXISTS OperatorSQL/MySQL3 Common Usability Mistakes In Web DesignUI/UXSimple Page Hit Counter in PHPPHPHow to deploy Angular App on Dreamhost or Amazon S3 or firebase?Angular