YogeshChauhan . com

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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Subquery in PostgresPostgresValues and Types Basics in JavaScriptJavaScriptRecursion in JavaScriptJavaScript3 ways to pass a variable in url() function in SCSS (Sass)SCSSHow to scroll contents of a an element vertically using JavaScript?JavaScriptWhat is Prototypal Inheritance in JavaScript?JavaScript