javascript - Disabling right click on images using jquery - Stack Overflow

admin管理员组

文章数量:1134587

I want to know how to disable right click on images using jQuery.

I know only this:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $(document).bind("contextmenu",function(e) {
           return false;
        });
    }); 
</script>

I want to know how to disable right click on images using jQuery.

I know only this:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $(document).bind("contextmenu",function(e) {
           return false;
        });
    }); 
</script>

• javascript
• jquery

Share Improve this question Follow edited Jun 9, 2014 at 15:42 user3708642 1241010 bronze badges asked Jan 20, 2011 at 23:07 Bat_ProgrammerBat_Programmer 6,8411010 gold badges5959 silver badges6969 bronze badges 6

• 3 this should work for sometimes ;). But forget it, there are 100 other ways to save an image from the web. By the way, if you are passing the clicked object, then use it! jsfiddle.net/VZX4A – meo Commented Jan 20, 2011 at 23:11
• 3 yea i know. I'm doing this just to lower the number of image copies. It's specifically for those who only know to right click and save i.e. the dumb users. – Bat_Programmer Commented Jan 20, 2011 at 23:33
• 3 Just don't. You're not protecting the image from being copied, and you're disabling default and expected functionality of the browser. – Joe Jordan Commented Jan 20, 2011 at 23:48
• 5 I am embedding a web browser inside an Access database. This browser contains a dynamic map. When you right click on the map there is a "save picture as..." option. When you save an image like that it will only save one tile of the map. This will confuse the hell out of the less-technically-minded people that I send this database to and I will no doubt have to explain. There is no reason at all for me to have that menu there. I agree that on websites disabling right-click is a bad thing but that doesn't mean you should never do it. – Mr_Chimp Commented Mar 20, 2012 at 16:43
• possible duplicate of How do I disable right click on my web page? – Cole Tobin Commented Apr 22, 2013 at 23:23

 |  Show 1 more comment

10 Answers 10

Sorted by: Reset to default 157

This works:

$('img').bind('contextmenu', function(e) {
    return false;
}); 

Or for newer jQuery:

$('#nearestStaticContainer').on('contextmenu', 'img', function(e){ 
  return false; 
});

jsFiddle example

what is your purpose of disabling the right click. problem with any technique is that there is always a way to go around them. the console for firefox (firebug) and chrome allow for unbinding of that event. or if you want the image to be protected one could always just take a look at their temporary cache for the images.

If you want to create your own contextual menu the preventDefault is fine. Just pick your battles here. not even a big JavaScript library like tnyMCE works on all browsers... and that is not because it's not possible ;-).

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

Personally I'm more in for an open internet. Native browser behavior should not be hindered by the pages interactions. I am sure that other ways can be found to interact that are not the right click.

For Disable Right Click Option

<script type="text/javascript">
    var message="Function Disabled!";

    function clickIE4(){
        if (event.button==2){
            alert(message);
            return false;
        }
    }

    function clickNS4(e){
        if (document.layers||document.getElementById&&!document.all){
            if (e.which==2||e.which==3){
                alert(message);
                return false;
            }
        }
    }

    if (document.layers){
        document.captureEvents(Event.MOUSEDOWN);
        document.onmousedown=clickNS4;
    }
    else if (document.all&&!document.getElementById){
        document.onmousedown=clickIE4;
    }

    document.oncontextmenu=new Function("alert(message);return false")
</script>

In chrome and firefox the methods above didn't work unless I used 'live' instead of 'bind'.

This worked for me:

$('img').live('contextmenu', function(e){
    return false;
});

For modern browsers all you need is this CSS:

img {
    pointer-events: none;
}

Older browsers will still allow pointer events on the images, but the CSS above will take care of the vast majority of visitors to your site, and used in conjunction with the contextmenu methods should give you a very solid solution.

The better way of doing this without jQuery:

const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
    images[i].addEventListener('contextmenu', event => event.preventDefault());
}

Would it be possible to leave the ability to right click and download just when done a separate watermark is placed on the image. Of course this won't prevent screen shots but thought it may be a good middle ground.

You could try this :

var message="Sorry, right-click has been disabled";

function clickIE() {
    if (document.all) {
        (message);
        return false;
    }
}

function clickNS(e) {
    if (document.layers || (document.getElementById && !document.all)) {
        if (e.which == 2||e.which == 3) {
            (message);
            return false;
        }
    }
}

if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown = clickNS;
} else {
    document.onmouseup = clickNS;
    document.oncontextmenu = clickIE;
}

document.oncontextmenu = new Function("return false")

Checkout a demo here

A very simple way is to add the image as a background to a DIV then load an empty transparent gif set to the same size as the DIV in the foreground. that keeps the less determined out. They cant get the background without viewing the code and copying the URL and right clicking just downloads the transparent gif.

This should work

$(function(){
     $('body').on('contextmenu', 'img', function(e){ 
         return false; 
     });
 });

本文标签： javascriptDisabling right click on images using jqueryStack Overflow