Deaktivieren Sie das Rechtsklick-Kontextmenü in HTML
- Mögliche Gründe für die Deaktivierung des Rechtsklicks
- Warum das Deaktivieren des Rechtsklicks keine gute Idee ist
- Deaktivieren Sie den Rechtsklick mithilfe des HTML-Ereignishandlers
- Deaktivieren Sie den Rechtsklick mit JavaScript
- Rechtsklick auf Bilder deaktivieren
Dieser Artikel konzentriert sich auf das Rechtsklick-Kontextmenü des Browsers. Wir werden erfahren, warum Entwickler denken, dass sie das Kontextmenü deaktivieren sollten, und wir werden auch die Gründe beobachten, warum sie es nicht sollten.
Später werden wir verschiedene Strategien zum Deaktivieren des Rechtsklicks auf unseren Websites durchgehen.
Mögliche Gründe für die Deaktivierung des Rechtsklicks
Hier erklären wir, warum wir auf unseren Webseiten auf die Deaktivierung des Rechtsklicks verzichten sollten.
Als Blogger oder Entwickler möchten Sie nicht, dass Ihre Arbeit gestohlen wird, nachdem Sie hart und kreativ daran gearbeitet haben, sie zu produzieren. Wenn Sie viel Zeit und Mühe in die Erstellung eines Designs, eines Bildes oder eines Textes investiert haben, möchten Sie es möglicherweise schützen, indem Sie Rechtsklicks auf Ihrer Website verhindern.
Wir stoßen häufig auf Websites, die das Rechtsklicken deaktivieren. Dies mag wie eine ausgezeichnete Idee erscheinen, ist es aber nicht.
Warum? Wir werden dies später besprechen. Lassen Sie uns zuerst herausfinden, warum wir glauben, dass wir den Rechtsklick deaktivieren müssen.
Um den Inhalt zu schützen
Jede Website hat einige schriftliche Informationen darüber. Autoren verwenden manchmal viel Zeit darauf, die wertvollsten und praktischsten Inhalte für ihre Websites zu erstellen.
Niemand möchte, dass seine Arbeit woanders unter einer anderen Identität veröffentlicht wird. Daher deaktivieren sie das Rechtsklicken, um zu vermeiden, dass ihre Inhalte kopiert und auf anderen Websites verwendet und dupliziert werden.
Um die Bilder zu schützen
Die meiste Zeit investieren Website-Besitzer erheblich in den Kauf von Fotos von hervorragendem Kaliber, um sie als Inhalt zu verwenden. Sie fühlen sich oft verschwendet, wenn Einzelpersonen sie kostenlos erhalten und auf ihren Websites verwenden; Daher deaktivieren sie das Rechtsklicken, um die Fotos zu schützen.
Um den Quellcode zu schützen
Entwickler geben sich große Mühe, einzigartige und innovative Websites zu erstellen. Das Schreiben von HTML-, CSS- und JavaScript-Code für eine optisch ansprechende und funktionale Website erfordert viel Zeit und Mühe.
Einige Webdesigner stehlen den Quellcode der Websites anderer Leute, nehmen ein paar Änderungen vor und veröffentlichen die Ergebnisse dann als ihre eigenen. Daher glauben Entwickler, dass das Deaktivieren der Anzeige des Seitenquelltexts auf ihrer Website eine hervorragende Strategie ist, um den Quellcode ihrer Website zu schützen.
Um die Benutzeranforderungen zu erfüllen
Manchmal ist das Deaktivieren des Rechtsklicks eine Anforderung der Webanwendung. Es hängt von der Zielgruppe ab, auf die die Anwendung abzielt.
Zum Beispiel ist ein Krankenhaussystem für Patienten gemacht, die nicht viel technisches Wissen haben und am Ende auf unerwünschte Optionen klicken. Um das Design für sie einfach zu halten, werden alle unnötigen Klicks deaktiviert.
Warum das Deaktivieren des Rechtsklicks keine gute Idee ist
Wir haben die Bedürfnisse von Entwicklern besprochen, um den Rechtsklick auf ihren Websites zu deaktivieren, aber wir sagten, dass dies kein effizienter Ansatz ist. Lassen Sie uns diskutieren, warum.
Ärgerlich für den Benutzer
Das Deaktivieren des Rechtsklicks verärgert nur die Benutzer Ihrer Website. Es macht die Nutzung Ihrer Website nur komplexer und weniger benutzerfreundlich.
Das Rechtsklickmenü bietet dem Benutzer viele nützliche Optionen. Der Chrome-Webbrowser bietet den Benutzern die Option Übersetzung an, die die Website in die vom Benutzer ausgewählte Sprache übersetzt.
Eine weitere wichtige Funktion im Rechtsklickmenü von Chrome ist die gemeinsame Nutzung des Links zwischen Ihren Geräten, sodass die Benutzer jeden Link direkt von ihrem PC an ihr Telefon und umgekehrt senden können.
Keine Auswirkungen auf die Sicherheit
Das Deaktivieren des Rechtsklicks ist keine Sicherheit. Es hat keinen anderen Effekt, als es einfacher zu machen, Elemente von einer Seite zu speichern.
Die Verwendung des Entwicklermodus in einem Browser oder das Deaktivieren von JavaScript funktioniert. Wir können über die Tastenkombination Strg+U auf den Quellcode zugreifen und ihn mit Strg+Shift+Ich.
Wenn Entwickler den Rechtsklick deaktivieren, um ihre Website sicherer zu machen, gehen sie in die falsche Richtung. Das Rechtsklickmenü wird mit JavaScript deaktiviert, und wir können die JavaScript-Funktionalität in Browsern einfach deaktivieren.
Es ist sinnlos
Denken Sie noch einmal darüber nach, ob Sie glauben, dass die Deaktivierung des Rechtsklicks Ihren Quellcode oder Ihre Fotos sichert. Jeder, der entschlossen ist, Ihre Inhalte oder Ihren Code zu stehlen, tut dies unabhängig von seiner Fähigkeit, auf ein Browser-Kontextmenü zuzugreifen.
Wie wir besprochen haben, bieten diese Kontextmenüs den Benutzern praktische Funktionen, und indem Sie sie deaktivieren, hindern Sie Ihre Benutzer nur daran, wertvolle Funktionen zu verwenden.
Viele Leute lesen jetzt online, und manchmal gibt es einen Link auf der Website, den sie in einem neuen Tab öffnen möchten. Jetzt bieten Browser diese Funktion im Kontextmenü an, und Benutzer werden sich ärgern, wenn die Menüs deaktiviert sind.
Allerdings gibt es dafür eine Tastenkombination. Wenn wir auf den Link klicken, während wir die Strg-Taste gedrückt halten, gelangen wir zum neuen Tab, und wenn wir auf den Link klicken, während wir die Shift-Taste gedrückt halten, wird dies der Fall sein bringt uns zum neuen Fenster.
Es besteht jedoch eine beträchtliche Möglichkeit, dass die Benutzer dies nicht wissen und es für sie störend sein wird.
Erregt ungewollte Aufmerksamkeit
Durch das Deaktivieren des Rechtsklicks werden einige Leute entschlossener, herauszufinden, was Sie verbergen. Und das könnte nach hinten losgehen, indem unerwünschte Aufmerksamkeit auf Ihre Bilder und Ihren Quellcode gelenkt wird.
Außerdem können Sie den Rechtsklick nur in Browsern deaktivieren, in denen JavaScript aktiviert ist. Besucher können das Skript vollständig ignorieren, indem sie JavaScript in den Einstellungen ihres Browsers deaktivieren.
Deaktivieren Sie den Rechtsklick mithilfe des HTML-Ereignishandlers
Bisher haben wir die Gründe diskutiert, die ein Entwickler für das Deaktivieren des Rechtsklick-Kontextmenüs auf seinen Websites hält, und einige Gründe, warum wir dies nicht tun sollten. Lassen Sie uns nun einige Methoden zum Deaktivieren des Rechtsklicks besprechen.
Wir können das Rechtsklick-Kontextmenü auf unserer Website einfach deaktivieren, indem wir das oncontextmenu in unseren HTML-Elementen verwenden. Wenn jemand mit der rechten Maustaste auf ein HTML-Element klickt, um das Kontextmenü anzuzeigen, wird das Ereignis oncontextmenu ausgelöst.
Überprüfen Sie den folgenden Code, um dies zu verstehen.
<html>
<body oncontextmenu="return false">
<p>
You cannot right-click here.
</p>
</body>
</html>
Wir setzen oncontextmenu gleich false. Das bedeutet, wenn der Benutzer mit der rechten Maustaste klickt, um das Kontextmenü auf einer beliebigen Website zu öffnen, wird es falsch zurückgegeben und das Menü wird nicht geöffnet.
Sie haben vielleicht bemerkt, dass wir das oncontextmenu auf das body-Tag gesetzt haben, was bedeutet, dass ein Rechtsklick auf den HTML-Body das Kontextmenü nicht auslöst. Es ist nicht erforderlich, den Rechtsklick auf der gesamten Seite zu deaktivieren.
Wenn Sie das Menü nur deaktivieren möchten, um Ihre Bilder zu schützen, können Sie einfach das oncontextmenu auf das image-Tag setzen.
Deaktivieren Sie den Rechtsklick mit JavaScript
Wir können auch JavaScript verwenden, um dasselbe Ziel zu erreichen. Sehen Sie sich den folgenden Code an, um zu sehen, wie wir JavaScript verwenden können, um unsere gewünschte Funktionalität zu erreichen.
<html>
<head>
<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
</head>
<body>
You cannot right-click here.
</body>
</html>
Die Funktion addEventListener() fügt dem angegebenen Element einen Event-Handler hinzu. Der erste Parameter ist der Ereignistyp (wie jedes HTML-DOM-Ereignis), und der zweite Parameter gibt die Funktion an, die aufgerufen werden soll, wenn das Ereignis eintritt.
Wenn das Ereignis stornierbar ist, verhindert die Methode preventDefault(), dass die Standardaktion des Ereignisses stattfindet.
Rechtsklick auf Bilder deaktivieren
Bei dieser Methode konzentrieren wir uns nur auf den Schutz der Bilder unserer Website. Wie wir oben besprochen haben, hinterlässt das Deaktivieren des Rechtsklicks auf der gesamten Seite keinen guten Eindruck bei den Benutzern.
Das geht ganz einfach mit Hilfe von JavaScript. Wir können nur auf das image-Tag von HTML statt auf den gesamten Text einer HTML-Seite abzielen.
Überprüfen Sie den folgenden Code, um zu verstehen, wie.
<html>
<head>
<script>
document.addEventListener("contextmenu", function(e){
if (e.target.nodeName === "IMG") {
e.preventDefault();
}
}, false);
</script>
</head>
<body>
<img src="/img/DelftStack/logo.png"/>
</body>
</html>
Sehen wir uns den Code genauer an.
Wir glauben, dass Sie die Funktion addEventListener() von JavaScript an dieser Stelle verstanden haben. Wir sind zuvor die Parameter der Funktion durchgegangen, also schauen wir uns den zweiten an, der eine Funktion darstellt, die ausgelöst wird, wenn das im ersten Parameter angegebene Ereignis eintritt.
Wenn ein Ereignis auftritt, wird das Element, das das Ereignis verursacht, als Emitter oder als Ziel bezeichnet, oder einfach gesagt, das Ziel gibt das DOM-Element zurück, das ein bestimmtes Ereignis ausgelöst hat. Die Funktion nodeName gibt den Knotennamen des Elements zurück.
Abschließend liefert e.target.nodeName den Elementnamen zurück, auf den der Benutzer mit der rechten Maustaste klickt. Im Code haben wir validiert, dass, wenn der angeklickte Elementname IMG ist, das im ersten Parameter angegebene Ereignis nicht ausgeführt werden sollte.