Deaktivieren Sie die Rechtsklick-Bilder mit jquery

Ich möchte wissen, wie man mit jQuery Rechtsklick auf Bilder deaktiviert.

Ich weiß nur das:

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

Das funktioniert:

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

Oder für neuere jQuery:

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

jsFiddle Beispiel

Was ist Ihr Zweck, um den Rechtsklick zu deaktivieren? Das Problem bei jeder Technik ist, dass es immer einen Weg gibt, sie zu umgehen. Die Konsole für Firefox (Firebug) und Chrome ermöglicht das Aufheben der Bindung dieses Ereignisses. Wenn Sie möchten, dass das Bild geschützt wird, können Sie jederzeit einen Blick auf den temporären Cache für die Bilder werfen.

Wenn Sie ein eigenes Kontextmenü erstellen möchten, ist PreventDefault in Ordnung. Wähle einfach deine Schlachten hier aus. Nicht einmal eine große JavaScript-Bibliothek wie tnyMCE funktioniert in allen Browsern ... und das nicht, weil es nicht möglich ist ;-).

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

Persönlich bin ich eher auf ein offenes Internet aus. Das native Browserverhalten sollte nicht durch die Seiteninteraktionen behindert werden. Ich bin sicher, dass andere Möglichkeiten zur Interaktion gefunden werden können, die nicht der richtige Klick sind.

Zum Deaktivieren Rechtsklick 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 und Firefox haben die oben genannten Methoden nur funktioniert, wenn ich "live" anstelle von "bind" verwendet habe.

Das hat bei mir funktioniert:

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

Wäre es möglich, die Möglichkeit zu verlassen, mit der rechten Maustaste zu klicken und herunterzuladen, sobald ein separates Wasserzeichen auf dem Bild platziert ist. Dies verhindert natürlich keine Screenshots, dachte aber, dass dies ein guter Mittelweg sein könnte.

Sie könnten dies versuchen:

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

Testen Sie hier eine Demo

Eine sehr einfache Möglichkeit besteht darin, das Bild als Hintergrund zu einem DIV hinzuzufügen und dann ein leeres transparentes GIF zu laden, das auf die gleiche Größe wie das DIV im Vordergrund eingestellt ist. das hält die weniger entschlossenen aus. Sie können den Hintergrund nicht abrufen, ohne den Code anzuzeigen und die URL zu kopieren. Wenn Sie mit der rechten Maustaste klicken, wird nur das transparente GIF heruntergeladen.

Das sollte funktionieren

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

Der bessere Weg, dies ohne jQuery zu tun:

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