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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to zoom an element on hover using CSS?CSSHow to remove N/A from Radio Button list in Drupal?DrupalHow to swap images on hover using CSS?CSSWordPress: How to display fields from ACF Flexible Contents?WordPressWhat’s a Web Storage API in JavaScript?JavaScriptIs there a difference between SCSS and Sass?SCSS