How to prevent Right Click option using jquery

Question

Is it possible to prevent RIGHT CLICK option for IMAGES which we use in web page.

I am normally annoyed by people questioning my motives instead of just answering the damn question, but do you really want to be hijacking a user's right mouse click? If they want to get your images they will get it one way or the other... Firebug or just looking at the source would be enough to get direct link to any of your images. — Daniel Sloof, Apr 11 '11 at 07:32
Are you trying to prevent someone from downloading your images? In that case you can pretty much forget about it, because in order to seem the image in a browser is has to be copied to the client and will in most cases be stored somewhere on your disk. Also most browsers include a config option to prevent manipulation of context menues: [Example for Firefox](http://support.mozilla.com/media/uploads/gallery/images/668a9022f052f20f795759846994bc3f-1260050698-426-2.png). — nfechner, Apr 11 '11 at 07:32
Might be worth mentioning WHY you are attempting to disable right click. If you think you are protecting your images, think again - you are only deterring the computer illiterates (which does have its merit). — Wesley Murch, Apr 11 '11 at 07:33
As others have already pointed out here, sure it is. However, why? All someone has to do is disable Javascript, or view your page source to find the location, or use any number of more complex methods to get the image. — Demian Brecht, Apr 11 '11 at 07:34
...or the highly unorthodox and very complex "Print Screen" :) — Wesley Murch, Apr 11 '11 at 07:41
Also, on mac, you can just drag the image off the page wherever you like. You might want to look at having the image not inside an tag and put it inside a
as a css background to add further difficulty for the average user. — willdanceforfun, Apr 11 '11 at 08:10
If protecting image is the reason a real solution would be to use watermark. Is it another X Y problem? — happy, Mar 15 '14 at 03:03
I wish people would get off their high horses here, there are innumerable reasons for wanting to do this other than just stopping people downloading the image. If the OP wants to do it, then in the spirit of Q&A then if you know how answer the question. If the OP had said "so users can't download the image" after answering go on to tell them why it's not a complete solution. — Morvael, Oct 06 '16 at 16:11

Peeter · Accepted Answer · 2015-03-12T08:57:22.227

138

$(document).ready(function() {
    $("img").on("contextmenu",function(){
       return false;
    }); 
});

Working example: http://jsfiddle.net/vak9exyk/

edited Mar 12 '15 at 08:57

answered Apr 11 '11 at 07:46

Peeter

9,282
5
36
53

here's how i've extended it to add further difficulty for mac users http://jsfiddle.net/codedog/uKmDX/ – willdanceforfun Apr 11 '11 at 08:12
4

I honestly don't like the idea of preventing right-clicks on an image. – Peeter Apr 11 '11 at 08:14
neither. we are now enablers of a worse interweb – willdanceforfun Apr 11 '11 at 08:23
i just didn't know you could bind contextmenu :) – willdanceforfun Apr 11 '11 at 08:23
Bad interweb design aside, this is one cool lesson for today. Didn't know you could do that. +1 :D – Richard Neil Ilagan Apr 11 '11 at 09:10
3

Works perfect thanks. I am using this on a full screen browser in kiosk mode which I feel is a legit reason to disable to context menu. – nspace Sep 24 '14 at 21:12
@willdanceforfun - Your fiddle is broken. Also dont use a white image on a white background :P [Updated fiddle](http://jsfiddle.net/uKmDX/17/). And OP: `.bind()` is depricated, use `.on()` instead – Richard de Wit Jan 08 '15 at 07:55
Downvoted for promoting web Browser Hijacking and standards breaking actions. – Martin Spamer Mar 10 '15 at 13:16
Could you explain a bit @MartinSpamer ? – Peeter Mar 12 '15 at 08:57
3

@MartinSpamer Someone explained why they might need it. "I am using this on a full screen browser in kiosk mode which I feel is a legit reason to disable to context menu"... It's not promoting it either, it's answering a question. (Although I agree that disabling a right click is not advised) – ʰᵈˑ Mar 12 '15 at 09:03
Works fine. Thanks for this tip – Sedat Kumcu Oct 25 '17 at 09:53

score 17 · Answer 2 · edited Feb 11 '16 at 01:26

17

I think this should help. Trick is to bind the contextmenu event.

<script type="text/javascript" language="javascript">
        $(function() {
            $(this).bind("contextmenu", function(e) {
                e.preventDefault();
            });
        }); 
</script>

edited Feb 11 '16 at 01:26

Fawzan

4,738
8
41
85

answered Apr 11 '11 at 07:30

Abdul Kader

5,781
4
22
40

`$(this)` was what I was looking for, thanks! Also `.bind()` is depricated, use `.on()` instead – Richard de Wit Jan 08 '15 at 07:57
Thank you.$(this) solved my case as well. Great answer! – Sannu Apr 15 '15 at 15:52

Amit mishra · Answer 3 · 2019-02-28T06:22:59.873

7

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" >

Set these attributes in your selected tag

See here Working Example - https://codepen.io/Developer_Amit/pen/drYMMv

No Need JQuery (like)

edited Feb 28 '19 at 06:22

answered Apr 15 '16 at 05:22

Amit mishra

347
5
15

score 6 · Answer 4 · edited Jan 15 '16 at 10:06

6

$(document).ready(function() {

    $(document)[0].oncontextmenu = function() { return false; }

    $(document).mousedown(function(e) {
        if( e.button == 2 ) {
            alert('Sorry, this functionality is disabled!');
            return false;
        } else {
            return true;
        }
    });
});

If you want to disable it only on image click the instead of $(document).mousedown use $("#yourimage").mousedown

edited Jan 15 '16 at 10:06

Robin Dorbell

1,569
1
13
26

answered Apr 11 '11 at 07:30

Anupam

7,966
3
41
63

Thanks anu,like i said above... this prevent right click for whole page,i need only for image... – mymotherland Apr 11 '11 at 07:39

score 4 · Answer 5 · answered Nov 10 '15 at 07:37

The following code will disable mouse right click from full page.

$(document).ready(function () {
   $("body").on("contextmenu",function(e){
     return false;
   });
});

The full tutorial and working demo can be found from here - Disable mouse right click using jQuery

score 4 · Answer 6 · edited Jun 28 '17 at 12:10

4

Try this:

$(document).bind("contextmenu",function(e){
    return false;
});

edited Jun 28 '17 at 12:10

daan.desmedt

3,752
1
19
33

answered Jun 28 '17 at 10:56

Payal Mittal

121
2
2

Barath Kumar · Answer 7 · 2015-06-08T13:38:27.773

1

Here i have found some useful link, with live working example.

I have tried its working fine.

How to prevent Right Click option using jquery

$(document).bind("contextmenu", function (e) {
        e.preventDefault();
        alert("Right Click is Disabled");
    });

edited Jun 08 '15 at 13:38

answered May 04 '15 at 13:18

Barath Kumar

439
3
7

For me, onmousedown event wasn't firing when hovering over an image on IE - I found that the only way to get an alert to appear was through this event. – chris.fy Nov 23 '16 at 11:30
Thank you. you can find some slimier article in the following link. http://www.thedevelopertips.com – Barath Kumar Mar 30 '19 at 07:08

score 1 · Answer 8 · answered Dec 17 '15 at 12:42

Method 1:

<script type="text/javascript" language="javascript">
        $(document).ready(function(){

        $(document).bind("contextmenu",function(e){

            return false;

            });

    });

</script>

Method 2:

<script type="text/javascript" language="javascript">
        $(document).ready(function(){

        $(document).bind("contextmenu",function(e){

            e.preventDefault();

            });

    });

</script>

score 1 · Answer 9 · answered Nov 19 '17 at 09:40

Here is a working example, the red links can't be right clicked anymore.

$("ul.someLinks1 a").each(function(i, obj) {

  $(obj).on("contextmenu",function(){
     return false;
  }); 
  
  $(obj).css("color", "red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="someLinks1">
  <li><a href="www.google.de">google</a></li>
  <li><a href="www.stackoverflow.de">stackoverflow</a></li>
  <li><a href="www.test.de">test</a></li>
</ul>

<ul class="someLinks2">
  <li><a href="www.foobar.de">foobar</a></li>
  <li><a href="www.foo.de">foo</a></li>
  <li><a href="www.bar.de">bar</a></li>
</ul>

score 0 · Answer 10 · answered Feb 09 '20 at 07:29

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script>
 $(document).ready(function(){
  $(document).bind("contextmenu",function(e){
  return false;
  });
});
</script>
</head>
<body>

<p>Right click is disabled on this page.</p>

</body>
</html>

Haider Naqvi · Answer 11 · 2021-01-28T06:36:47.063

0

$(document).ready(function () {

        $("img").on('contextmenu', function (e) {
           e.preventDefault();
        });

});

edited Jan 28 '21 at 06:36

answered Jan 19 '21 at 11:05

Haider Naqvi

1
3

score 0 · Answer 12 · answered Jun 30 '22 at 17:43

You can also use the .contextmenu() shortcut method. For example:

$(document).ready(function() {
    $("#logo").contextmenu(function(e){
       return false;
    }); 
});

body {
    background-color: #FFF;
}
#logo {
    background: url(http://stackoverflow.com/favicon.ico) no-repeat; 
    width: 182px; 
    height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Try right-click on the logo.
<div id="logo"></div>

score 0 · Answer 13 · edited Sep 23 '22 at 16:26

0

Try This!!

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 3:
           $("img").on("contextmenu",function(){
       return false;
    }); 
            break;
    }
});

edited Sep 23 '22 at 16:26

a.ak

659
2
12
26

answered Sep 19 '22 at 22:24

Daniel

1

score -1 · Answer 14 · edited Feb 28 '19 at 07:13

-1

$(document).mousedown(function(e) {
    if( e.button == 2 ) {
         e.preventDefault();
        return false;
    } 
});

edited Feb 28 '19 at 07:13

Wai Ha Lee

8,598
83
57
92

answered Feb 28 '19 at 06:27

Akhil Jain

1
2

score -3 · Answer 15 · answered Apr 11 '11 at 07:57

If you're looking into trying to disable the downloading/saving of your images, scripts won't stop that. You would probably have better luck doing this on a server configuration level (like modifying your .htaccess for example on Apache).

Try asking this on ServerFault.

How to prevent Right Click option using jquery

15 Answers15

Working example: http://jsfiddle.net/vak9exyk/

Linked

Related