Ausführliche Diskussion darüber, wie JavaScript und JQuery das Rechtsklick-Menü von Webseiten blockieren und Auswahl- und Kopierfähigkeiten verbieten

Ich erinnere mich, dass ich, als ich zum ersten Mal mit dynamischem HTML und JavaScript in Kontakt kam, auf Skriptcodes zum Blockieren der Maus mit der rechten Maustaste stieß. Damals wurden viele dieser Codes verwendet, um zu verhindern, dass Betrachter Text oder anderes kopieren Inhalte auf der Webseite ohne Erlaubnis. Praktische Anwendungen haben gezeigt, dass dieser Ansatz nicht mit der Benutzererfahrung übereinstimmt, und es gibt viele Möglichkeiten, ihn zu knacken. Ich habe beispielsweise einmal einen Artikel geschrieben, in dem erklärt wird, wie man das Verbot aufhebt Kopieren auf einer Webseite.

Es ist offensichtlich, dass es unklug ist, das Klicken und Kopieren mit der rechten Maustaste einzuschränken, aber heute möchte ich immer noch über das Verbot des Kopierens von Webseiten und des Rechtsklick-Menüs sprechen, da mit der Entwicklung der Webseiten-APP-Technologie der Unterschied zwischen Webseitenanwendungen gestiegen ist und Desktop-Anwendungen Die Grenzen zwischen ihnen verschwimmen zunehmend. Einige Desktop-Programme werden tatsächlich durch Webseiten und JavaScript implementiert, und einige mobile Anwendungen können auch durch HTML5-JavaScript implementiert werden. In diesem Fall ist es notwendig, den Rechtsklick einzuschränken Da es sich um eine APP handelt, sind die Textauswahl per Rechtsklick und das Popup-Menü auf der Webseite in den meisten Fällen unnötig.

Die folgende Einführung enthält möglicherweise nur einen bestimmten Aspekt des Codes, aber ich glaube, dass jeder in der Lage sein wird, Schlussfolgerungen zu ziehen :-)

1. Die Rohversion schränkt die Auswahl beim Kopieren ein oder verbietet die rechte Maustaste

Lassen Sie uns zunächst darüber sprechen, wie Sie das Kopieren von Text auf einer Webseite durch Betrachter grob einschränken oder verbieten können. Um zu verhindern, dass Betrachter Text auf normale Weise kopieren, müssen wir darüber nachdenken, bestimmte spezifische Vorgänge von Benutzern zu deaktivieren, z. B. das Klicken mit der rechten Maustaste und das Auswählen , Kopieren usw. usw., und diese Vorgänge entsprechen den entsprechenden Skriptereignissen. Solange Sie diesen Ereignissen eine Methode hinzufügen und sie „false“ zurückgeben, können Sie den Skriptcode, der das Kopieren verhindert, „fressen“. wie folgt:

Code kopieren Der Code lautet wie folgt:

window.onload = function( ) {
with(document.body) {
oncontextmenu=function(){return false🎜> ondragstart=function(){return false🎜> onselectstart=function(){return false🎜 > onbeforecopy=function(){return false}
onselect=function(){document.selection.empty()}
oncopy=function(){document.selection.empty()}
}
}

Warum heißt das? Was ist mit der groben Version der Methode? Denn nachdem Sie diese Methode zum Deaktivieren der rechten Maustaste verwendet haben, werden Sie feststellen, dass kein Steuerelement auf der Webseite mit der rechten Maustaste angeklickt oder ausgewählt werden kann. Die Webseite scheint zu einem starren Bild geworden zu sein , aber für Zeicheneingabesteuerelemente wie Eingabe- und Textfeldfelder Es hat viel damit zu tun Diese Orte können die Rechtsklick- und Kopierauswahlvorgänge des Benutzers nicht einschränken.

2. Bestimmen Sie angemessen, welche HTML-Tag-Elemente eingeschränkt werden sollen

So ermitteln Sie das Element-Tag der aktuell verarbeiteten Ebene, dh das HTML-Tag, an dem sich die Maus gerade befindet. Hier nehmen wir tatsächlich die in document.body übergebene Funktion. oncontextmenu hat einen Parameter, den wir weglassen werden. Ja, die vollständige Schreibmethode sollte document.body.oncontextmenu=function(e){} sein, wobei e das Event-Objekt in JavaScript ist, das über window.event im IE abgerufen werden kann. Über dieses Ereignisobjekt können wir das HTML-Tag abrufen, an dem sich die Maus befindet, wenn das Ereignis ausgelöst wird. Wir können beurteilen, ob wir Verarbeitungselement-Tags ignorieren möchten:

Code kopieren Der Code lautet wie folgt:var isTagName = function(e, Whitelists) {

e = e ||. window.event;

var target = e.srcElement;
Array.prototype.contains = function(elem)
{
für ( var i in this) {
if (this [i] .t stand (). Touppercase () == ELEM.TOSTRING (). ToupperCase ()) Return true; false; >}
If (Whitelists &&! Whitelists.contains (target.tagname)) {
Return false;
}; 🎜>

Das e hier ist das Ereignisobjekt, und das Ziel ist das Elementobjekt, auf das das Ereignisobjekt verweist. Natürlich sind beide Variablen hier so geschrieben, dass sie mit dem IE kompatibel sind zu „Wie kann ich event.srcElement in Firefox zum Laufen bringen und was bedeutet das?“ Die Whitelists hier sind Whitelist-HTML-Element-Tag-Tag-Namen, wie zum Beispiel ['INPUT', 'TEXTAREA'], was bedeutet, dass der Eingabetext Box-Eingabe und Textbereich werden zur Beurteilung hinzugefügt, wenn das aktuelle Ereigniselement Return true ist, sodass wir die rechte Maustaste über den folgenden Code selektiv blockieren können:

Kopieren Sie den Code Der Code lautet wie folgt:

document.body.oncontextmenu=function(e){
return isTagName(e, ['A' , 'TEXTAREA']);
}

3. Die selektive Blockierung der JQuery-Version verhindert die Textauswahl

In ähnlicher Weise können auch andere Vorgänge selektiv blockiert werden. In einer von JQuery unterstützten Umgebung habe ich auf StackOverflow einen Artikel wie „Wie deaktiviere ich die Textauswahl mit jQuery?“ gefunden, in dem jedoch erklärt wird, dass die Auswahl verboten ist daraus. Der spezifische Code lautet wie folgt:

Kopieren Sie den Code Der Code lautet wie folgt:

(function( $){

$.fn.ctrlCmd = function(key) {

varallowDefault = true;

if (!$.isArray(key )) {
Key = [key];
}

return this.keydown(function(e) {
for (var i = 0, l = key.length; i < ; l; i ) {
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                                                                                                                                                                                                               🎜> returnallowDefault;
});
};


$.fn.disableSelection = function() {

this.ctrlCmd(['a', 'c ']);

return this.attr('unselectable', 'on')
.css({'-moz-user-select':'-moz-none',
-moz-user-select':'none ',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit -User-select ':' None ',
' -MS-User-SELECT ':' None ',
' User-SELECT ':' None '})
.Bind (' sexctstart ', false);
};

})(jQuery);

Nehmen Sie den folgenden Code zur Verwendung:

Code kopieren Der Der Code lautet wie folgt:$(':not(input,select,textarea)').disableSelection();

Auf diese Weise kann die Auswahl mit Ausnahme von Eingabe, Auswahl und Textbereich verhindert werden. Der Trick dieses Codes besteht darin, dass zusätzlich zur Auswahl von Start auch einige von speziellen Browsern unterstützte CSS-Funktionen zu verwandten Elementen hinzugefügt werden Erkennen Sie die meisten Browsing-Funktionen. Gleichzeitig blockiert dieser Code auch die Auswahl der Tastaturtasten Strg A und Strg C. Ich muss die durchdachte Überlegung des Autors bewundern.

Weitere Verbesserung: Mausklickoperationen abschirmen

Ein Problem, auf das ich beim Testen dieses Codes gestoßen bin, besteht darin, dass beim Klicken auf andere Elemente als Eingabe, Auswahl und Textbereich alle Seiten ausgewählt werden. Der ursprüngliche Autor hat eine einfache Methode angegeben, indem er .on('mousedown an den Verwendungscode angehängt hat . ', false), wodurch der Mausklick blockiert wird:

Kopieren Sie den Code folgt:

$(':not(input,select,textarea)').disableSelection().on('mousedown', false);

Aber das Problem trat wieder auf, nachdem ich das oben Gesagte genommen hatte Code, Eingabe, Auswahl und Textbereich begannen ebenfalls abnormal zu werden. Es scheint, dass die Funktion zum Blockieren des Mousedowns auf alle Elemente angewendet wurde. Ändern Sie nun meine Meinung und kombinieren Sie die Lösung, die ich gerade vorgeschlagen habe, um das Ereignisobjekt zu beurteilen, um eine selektive Abschirmung zu erreichen:

Kopieren Sie den Code Der Code lautet wie folgt:

$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
var event = $.event.fix(e);
var elem = event.target || tagName.toUpperCase() != 'INPUT') {
e.preventDefault();
return false;
}
return true;
});

This So werden Textbereich und Eingabe nicht eingeschränkt. Wir extrahieren diesen Code in eine Funktion:

Kopieren Sie den Code Der Code ist wie folgt folgt:

function jQuery_isTagName(e, whitelists) {
e = $.event.fix(e);
var target = e.target ||
if (whitelists && $.inArray( target.tagName.toString().toUpperCase(), whitelists) == -1) {
                 return false; not(input,select,textarea)').disableSelection(). on('mousedown', function(e) {
if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
e.preventDefault();
return false;
}
return true;
});



5. Die selektive Blockierung der JQuery-Version verhindert die Verwendung der rechten Maustaste

Für das Rechtsklick-Menü können wir es so handhaben:

Kopieren Sie den Code

Der Code lautet wie folgt: $(document).bind("contextmenu",function(e){ if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) { e.preventDefault(); return false;

}

return true;
});