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
– Daniel, Commented Apr 11, 2011 at 7: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. — nfechner
– nfechner, Commented Apr 11, 2011 at 7: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). — No Results Found
– No Results Found, Commented Apr 11, 2011 at 7:33
If protecting image is the reason a real solution would be to use watermark. Is it another X Y problem? — happy
– happy, Commented Mar 15, 2014 at 3: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
– Morvael, Commented Oct 6, 2016 at 16:11

Peeter · Accepted Answer · 2015-03-12 08:57:22Z

139

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

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

edited Mar 12, 2015 at 8:57

answered Apr 11, 2011 at 7:46

Peeter

9,3825 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

willdanceforfun Over a year ago

here's how i've extended it to add further difficulty for mac users jsfiddle.net/codedog/uKmDX

Peeter Over a year ago

I honestly don't like the idea of preventing right-clicks on an image.

willdanceforfun Over a year ago

neither. we are now enablers of a worse interweb

nspace Over a year ago

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.

ʰᵈˑ Over a year ago

@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)

|

Fawzan · Accepted Answer · 2016-02-11 01:26:41Z

18

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, 2016 at 1:26

Fawzan

4,8508 gold badges43 silver badges87 bronze badges

answered Apr 11, 2011 at 7:30

Abdul Kader

5,8324 gold badges25 silver badges41 bronze badges

2 Comments

Richard de Wit Over a year ago

$(this) was what I was looking for, thanks! Also .bind() is depricated, use .on() instead

Sannu Over a year ago

Thank you.$(this) solved my case as well. Great answer!

Amit mishra · Accepted Answer · 2019-02-28 06:22:59Z

9

<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, 2019 at 6:22

answered Apr 15, 2016 at 5:22

Amit mishra

4271 gold badge7 silver badges16 bronze badges

Comments

Robin Dorbell · Accepted Answer · 2016-01-15 10:06:43Z

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, 2016 at 10:06

Robin Dorbell

1,6391 gold badge15 silver badges26 bronze badges

answered Apr 11, 2011 at 7:30

Anupam

8,0263 gold badges45 silver badges64 bronze badges

1 Comment

mymotherland Over a year ago

Thanks anu,like i said above... this prevent right click for whole page,i need only for image...

JoyGuru · Accepted Answer · 2015-11-10 07:37:33Z

4

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

answered Nov 10, 2015 at 7:37

JoyGuru

1,84323 silver badges11 bronze badges

Comments

daan.desmedt · Accepted Answer · 2017-06-28 12:10:29Z

4

Try this:

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

edited Jun 28, 2017 at 12:10

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

answered Jun 28, 2017 at 10:56

Payal Mittal

1212 silver badges2 bronze badges

Comments

Barath Kumar · Accepted Answer · 2015-06-08 13:38:27Z

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 8, 2015 at 13:38

answered May 4, 2015 at 13:18

Barath Kumar

4393 silver badges7 bronze badges

2 Comments

chris.fy Over a year ago

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.

Barath Kumar Over a year ago

Thank you. you can find some slimier article in the following link. thedevelopertips.com

GIPSSTAR · Accepted Answer · 2015-12-17 12:42:37Z

1

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>

answered Dec 17, 2015 at 12:42

GIPSSTAR

2,1301 gold badge25 silver badges20 bronze badges

Comments

Black · Accepted Answer · 2017-11-19 09:40:59Z

1

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>

answered Nov 19, 2017 at 9:40

Black

20.9k47 gold badges188 silver badges300 bronze badges

Comments

Rohit Agrohia · Accepted Answer · 2020-02-09 07:29:03Z

1

<!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>

answered Feb 9, 2020 at 7:29

Rohit Agrohia

4183 silver badges7 bronze badges

Comments

Haider Naqvi · Accepted Answer · 2021-01-28 06:36:47Z

1

$(document).ready(function () {

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

});

edited Jan 28, 2021 at 6:36

answered Jan 19, 2021 at 11:05

Haider Naqvi

113 bronze badges

Comments

a.ak · Accepted Answer · 2022-09-23 16:26:43Z

1

Try This!!

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

edited Sep 23, 2022 at 16:26

a.ak

6492 gold badges13 silver badges29 bronze badges

answered Sep 19, 2022 at 22:24

Daniel

111 bronze badge

Comments

BaSsGaz · Accepted Answer · 2022-06-30 17:43:40Z

0

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>

answered Jun 30, 2022 at 17:43

BaSsGaz

8141 gold badge22 silver badges34 bronze badges

1 Comment

Bemisawa Over a year ago

The .contextmenu() method is now deprecated as of v3.3 (as per api.jquery.com/contextmenu-shorthand), but the similar .on("contextmenu", ...) works great.

Wai Ha Lee · Accepted Answer · 2019-02-28 07:13:07Z

-1

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

edited Feb 28, 2019 at 7:13

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Feb 28, 2019 at 6:27

Akhil Jain

12 bronze badges

Comments

Maulik patel · Accepted Answer · 2024-09-23 05:18:48Z

     jQuery("#wpcf7-f608-p651-o1").on("contextmenu",function(e){
                    return false;
                }); 
                jQuery('.messagedata').keydown(function(event) {
                    if (event.ctrlKey==true && (event.which == '118' || event.which == '86')) {
                        //alert('thou. shalt. not. PASTE!');
                        event.preventDefault();
                     }
                });
                jQuery(document).on('keypress', '.messagedata', function (e) {
                    const pressedKey = e.key;
                    let pressedKeyCode = e.charCode;
                    
                    
                    if ((pressedKeyCode >= 33 && pressedKeyCode <= 47) || 
                        (pressedKeyCode >= 58 && pressedKeyCode <= 64) || 
                        (pressedKeyCode >= 91 && pressedKeyCode <= 96) || 
                        (pressedKeyCode >= 123 && pressedKeyCode <= 126) ) 
                    {
                        e.preventDefault();
                    
                        
                    }
                    else {
                        
                    }
                });
    jQuery('textarea').bind('input', function() {
  var c = this.selectionStart,
      r = /[^a-z0-9 .]/gi,
      v = jQuery(this).val();
  if(r.test(v)) {
    jQuery(this).val(v.replace(r, ''));
    c--;
  }
  this.setSelectionRange(c, c);
});

Richard Neil Ilagan · Accepted Answer · 2011-04-11 07:57:01Z

-3

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.

answered Apr 11, 2011 at 7:57

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

Collectives™ on Stack Overflow

How to prevent Right Click option using jquery

16 Answers 16

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

10 Comments

2 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

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

10 Comments

2 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related