Come disabilito il clic destro sulla mia pagina Web?


316

Posso disabilitare il clic destro sulla mia pagina Web senza usare JavaScript? Lo chiedo perché la maggior parte dei browser consente all'utente di disabilitare JavaScript.

In caso contrario, come posso utilizzare JavaScript per disabilitare il clic destro?


130
Disabilitare il clic destro non è sicurezza, è solo fastidioso per i tuoi utenti. Qualsiasi browser che non ti consente di disabilitare questo è inutile, ma i siti che lo fanno in primo luogo sono terribili.
Dan Olson,

17
Se non desideri che i tuoi contenuti vengano acquisiti, non dovresti pubblicarli sul Web. :) I browser moderni possono persino ignorare la capacità di JavaScript di disabilitare il clic destro. Strumenti come Firebug / Web Dev Toolbar rendono la protezione inutile.
epascarello,

7
ecco un piccolo script utente chrome / greesemonkey per riattivare il tasto destro del mouse: dl.dropbox.com/u/464119/Programming/javascript/…
ripper234

31
Davvero @DanOlson ... cosa dovresti fare se vuoi codificare il tuo menu contestuale? Come trovato in cPanel.
Codesmith,

30
@epascarello ci sono alcuni casi in cui la disabilitazione del clic destro è essenziale, come sui terminali dei chioschi, poiché l'utente in realtà non ne ha bisogno lì e lasciarlo lì può effettivamente infastidire gli utenti
Aram

Risposte:


525

Puoi farlo con JavaScript aggiungendo un listener di eventi per l'evento "contextmenu" e chiamando il preventDefault()metodo:

document.addEventListener('contextmenu', event => event.preventDefault());

Detto questo: NON FARLO.

Perché? Perché non ottiene nient'altro che fastidiosi utenti. Inoltre, molti browser hanno un'opzione di sicurezza per impedire comunque la disabilitazione del menu di scelta rapida (contestuale).

Non sono sicuro del motivo per cui vorresti. Se è per convinzione errata che puoi proteggere il tuo codice sorgente o le immagini in quel modo, ripensaci: non puoi.


86
Usare oncontextmenu="return false"su qualcosa di diverso dal corpo può avere senso, ad esempio su una tela.
AdrienBrault,

62
Stiamo implementando su macchine kiosk e abbiamo scelto questo modo per impedire agli utenti di aggiornare la pagina.
Todd Horst,

21
@ToddHorst in quel caso userò una versione speciale "Kiosk" del browser senza alcuna interfaccia utente, che di solito è disponibile anche senza menu di scelta
rapida

17
I sistemi abilitati al tocco a volte mappano determinati eventi tattili, come un tocco lungo, con il clic destro (e quindi aprendo il menu contestuale). Tuttavia, questo comportamento può essere indesiderabile e l'unico modo significativo per prevenirlo sembra disabilitare del tutto il menu di scelta rapida.
OR Mapper

58
Vecchio thread ma nel caso in cui qualcuno lo legga, non tutti gli sviluppatori web creano i propri siti Web per sé a volte il cliente viene da te e insiste nel disabilitare il clic destro, quando provi a convincerlo cercherà solo un altro sviluppatore che lo farà senza esitazione
Danny22,

122

DO NOT

Solo no.

Indipendentemente da ciò che fai, non puoi impedire agli utenti di avere pieno accesso a ogni bit di dati sul tuo sito web. Qualsiasi Javascript codificato può essere reso moot semplicemente disattivando Javascript sul browser (o usando un plugin come NoScript). Inoltre, non c'è modo di disabilitare la capacità di qualsiasi utente di "visualizzare la fonte" o "visualizzare le informazioni sulla pagina" (o utilizzare wget) per il tuo sito.

Non vale la pena. In realtà non funzionerà. Renderà il tuo sito attivamente ostile agli utenti. Lo noteranno e smetteranno di visitare. Non vi è alcun vantaggio nel fare questo, solo uno sforzo sprecato e una perdita di traffico.

Non farlo.

Aggiornamento: sembra che questo piccolo argomento si sia dimostrato piuttosto controverso nel tempo. Anche così, attendo questa risposta a questa domanda. A volte la risposta corretta è un consiglio anziché una risposta letterale.

Le persone che si imbattono in questa domanda nella speranza di scoprire come creare menu di scelta rapida personalizzati dovrebbero cercare altrove, come queste domande:


230
Wow, non posso credere che questa sia stata una risposta accettata. Esistono molti usi validi per rimuovere un clic con il tasto destro in una webapp in condizioni specifiche.
GAgnew,

84
La vera risposta dovrebbe essere:<body oncontextmenu="return false;">
Sebastián Grignoli,

18
@GAgnew: ci sono usi validi per sostituire il menu di scelta rapida. Non ci sono utenti validi per disabilitare i
clic di destra

80
Se l'utente vuole creare un videogioco HTML5, disabilitare il clic destro potrebbe essere molto utile. Di solito, questo non è desiderabile, ma solo dire "NON FARE" senza il contesto appropriato non è molto utile.
Robson França,

51
-1 anche da me. Questa risposta non è utile. Ci sono molte buone ragioni per disabilitare il clic destro. Ad esempio, ho creato un'applicazione Web che gli ospedali utilizzano alla reception e gli utenti non sono tecnicamente esperti. Anche se l'applicazione è in esecuzione nel proprio browser Web, non comprendono perché tutte le opzioni di menu vengono visualizzate quando fanno clic con il pulsante destro del mouse. Abbiamo ricevuto tonnellate di domande di aiuto che ci chiedevano a cosa servissero le opzioni, da persone che pensavano di far parte dell'applicazione. Disabilitarli aveva senso in quel caso, e lo fa in molte altre applicazioni web.
Nicholas

66

La domanda originale era su come fermare il tasto destro del mouse dato che l'utente può disabilitare JavaScript : che suona malefico e malvagio (da qui le risposte negative) - ma tutti i duplicati reindirizzano qui, anche se molti dei duplicati chiedono scopi meno malvagi.

Come usare il pulsante destro del mouse nei giochi HTML5, per esempio. Questo può essere fatto con il codice inline sopra, o un po 'più bello è qualcosa del genere:

document.addEventListener("contextmenu", function(e){
    e.preventDefault();
}, false);

Ma se si stanno facendo un gioco, poi ricordare che il pulsante destro del mouse genera l' contextmenu evento - ma spara anche il regolare MouseDown e MouseUp eventi troppo. Quindi, è necessario controllare dell'evento che proprietà per vedere se era la sinistra (che === 1), medio (che === 2), o verso destra il pulsante (che === 3) topo che è sparare l'evento.

Ecco un esempio in jQuery: nota che premendo il pulsante destro del mouse verranno generati tre eventi: l'evento mousedown, l'evento contextmenu e l'evento mouseup.

// With jQuery
$(document).on({
    "contextmenu": function(e) {
        console.log("ctx menu button:", e.which); 

        // Stop the context menu
        e.preventDefault();
    },
    "mousedown": function(e) { 
        console.log("normal mouse down:", e.which); 
    },
    "mouseup": function(e) { 
        console.log("normal mouse up:", e.which); 
    }
});

Quindi se stai usando i pulsanti sinistro e destro del mouse in un gioco, dovrai fare un po 'di logica condizionale nei gestori del mouse.


Se ho abilitato dom.event.contextmenu.enabledin Firefox, gli eventi mousedowne verranno mouseupcomunque attivati anche se contextmenunon lo fanno?
robertc,

43

Se non ti interessa avvisare l'utente con un messaggio ogni volta che provano a fare clic con il pulsante destro del mouse, prova ad aggiungere questo al tag del tuo corpo

<body oncontextmenu="return false;">

Ciò bloccherà tutti gli accessi al menu di scelta rapida (non solo dal pulsante destro del mouse ma anche dalla tastiera).

Tuttavia, come menzionato nelle altre risposte, non ha davvero senso aggiungere un attivatore di clic con il tasto destro. Chiunque abbia una conoscenza di base del browser può visualizzare la fonte ed estrarre le informazioni di cui ha bisogno.


Sì, ma ci sono momenti in cui voglio condividere brevemente un'immagine con qualcuno di cui sono a conoscenza che manca nelle conoscenze di base del browser. Disabilitare il clic destro non è sicuro al 100%, ma se sto postando l'immagine solo per pochi minuti per consentire a quella persona di dare un'occhiata, è abbastanza sicuro.
WillO,

I sistemi abilitati al tocco a volte mappano determinati eventi tattili, come un tocco lungo, con il clic destro (e quindi aprendo il menu contestuale). Tuttavia, questo comportamento può essere indesiderabile e l'unico modo significativo per prevenirlo sembra disabilitare del tutto il menu di scelta rapida.
OR Mapper

@WillO: ho un caso d'uso simile che devo soddisfare, ma FYI, gli utenti ricorrono sempre agli screenshot .
Hassan Baig,

28

Se sei un fan di jquery, usa questo

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

4
Questo utilizza jQuery senza motivo. Questo è esattamente lo stesso della singola dichiarazione JavaScript trovata nella risposta di Mr. Speaker, che è stata pubblicata 1 anno e mezzo prima. A proposito, quella risposta include anche una soluzione jQuery, che di nuovo non ti serve. Qualcuno che ha votato a favore di questa risposta sa anche cosa fa? Perché questo attende che l'evento pronto per il documento smetta di impedire la visualizzazione del menu contestuale? Perché questo utilizza thisall'interno dell'evento pronto? Perché usi bindinvece di on? Ugh ...
Rudey,

20

Innanzitutto, non è possibile raggiungere questo obiettivo senza utilizzare una funzionalità lato client. Questo è dove viene eseguito javascript.

In secondo luogo, se stai cercando di controllare ciò che un utente finale può consumare dal tuo sito, devi ripensare il modo in cui visualizzi tali informazioni. Un'immagine ha un URL pubblico che può essere recuperato tramite HTTP senza la necessità di un browser.

L'autenticazione può controllare chi ha accesso a quali risorse.

La filigrana incorporata nelle immagini può dimostrare che l'immagine proveniva da una persona / azienda specifica.

Alla fine della giornata, la gestione delle risorse è davvero la gestione utente / ospite.

La prima regola di Internet, se non la vuoi prendere, non renderla pubblica!

La seconda regola di Internet, se non la vuoi prendere, non metterla su Internet!


20

Se il tuo obiettivo è impedire alle persone di scaricare le tue immagini, come molti hanno affermato, disabilitare il clic destro è praticamente inefficace.

Supponendo che tu stia cercando di proteggere le immagini, i metodi alternativi sono:

Utilizzando un flash player, gli utenti non possono scaricarli come tali, ma possono facilmente fare una cattura dello schermo.

Se vuoi essere più attento, rendi l'immagine lo sfondo di un div, contenente un'immagine trasparente, à la -

<div style="background-image: url(YourImage.jpg);">
   <img src="transparent.gif"/>
</div>

basterà a scoraggiare il furto casuale delle tue immagini (vedi sotto per un esempio), ma come per tutte queste tecniche, è banale da sconfiggere con una conoscenza di base di html.


2
È anche possibile caricare l'immagine come base64, per offuscare ulteriormente il codice.
Miguel Bartelsman,

16

Non puoi realizzare ciò che stai chiedendo senza usare Javascript. Qualsiasi altra tecnologia che puoi scegliere di utilizzare può solo aiutare a comporre la pagina Web sul lato server da inviare al browser.

Semplicemente non esiste una buona soluzione e non esiste un periodo di soluzione senza Javascript.


1
E anche allora è fastidioso per gli utenti, per non parlare del facile bypassare.
Manos Dilaverakis,

1
Ho sempre visto pagine con un popup modale che diceva "clic destro è disabilitato", che mostra il menu di scelta rapida quando lo si elimina. Visualizzano anche il messaggio quando si scorre utilizzando il trackpad, il che è molto fastidioso.
Pete Kirkham,

1
Sì, è particolarmente fastidioso poiché di solito è per impedire alle persone di "rubare" immagini che sono già sul loro disco rigido, ma tutto ciò che fa è impedirmi di utilizzare la Ricerca contestuale : addons.mozilla.org/en-US/firefox/addon/240 . Quei bastardi ...
Calvin,

2
Adoro come quasi ogni risposta a questa domanda sia "Sicuro, usa javascript!"
Charles Wood,

14

Se il tuo obiettivo è impedire agli utenti di salvare semplicemente le tue immagini, puoi anche verificare se la destinazione selezionata è un'immagine, in tal caso disabilita il clic destro. Quindi il clic destro può essere utilizzato per altri scopi. Tratto dal codice sopra:

document.addEventListener("contextmenu", function(e){
    if (e.target.nodeName === "IMG") {
        e.preventDefault();
    }
}, false);

Questo è solo per togliere il modo più semplice di salvare le tue immagini, ma può ancora essere fatto.


Questo è secondo me il modo migliore di procedere: come utente web trovo di tanto in tanto utile la funzionalità del clic destro, ma come soluzione facile, semplice (e sì, facilmente battibile) funziona senza essere fastidioso.
Ben

9
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('img').bind('contextmenu', function(e){
return false;
}); 
});//]]>  
</script>
</head>
<body>
    <img src="http://www.winergyinc.com/wp-content/uploads/2010/12/ajax.jpg"/>
</body>



2
@ aravind3 Ho usato il tuo esempio e funziona a meraviglia! Le mie immagini sono ancora cliccabili e funzionano come dovrebbero, ma non possono essere scaricate. Il motivo per cui volevo disabilitare il clic con il tasto destro è che i visitatori che vogliono solo un'immagine e poi se ne vanno subito stanno influenzando la mia frequenza di rimbalzo. Almeno in questo modo, la mia frequenza di rimbalzo non sarà altrettanto negativa, poiché potrebbero volerci 1 o 2 minuti per capirlo :) Saluti aravind3 !!!!
coolydude,

6

Fallo come sotto (funziona anche su Firefox):

$(document).on("contextmenu",function(e){

     if( e.button == 2 ) {
         e.preventDefault();
          callYourownFucntionOrCodeHere();
     }
return true;
});

5

Inserisci questo codice nel <head>tag della tua pagina.

<script type="text/javascript"> 
function disableselect(e){  
return false  
}  

function reEnable(){  
return true  
}  

//if IE4+  
document.onselectstart=new Function ("return false")  
document.oncontextmenu=new Function ("return false")  
//if NS6  
if (window.sidebar){  
document.onmousedown=disableselect  
document.onclick=reEnable  
}
</script>

Questo disabiliterà il tasto destro su tutta la tua pagina web, ma solo quando JavaScript è abilitato.


Questo non funziona su Firefox, disabilita la selezione di input per la digitazione dei moduli :(
ALWAN

5

Avevo usato questo codice per disabilitare il clic con il tasto destro in qualsiasi pagina Web, funziona benissimo. Puoi usare questo codice

jQuery(document).ready(function(){
  jQuery(function() {
        jQuery(this).bind("contextmenu", function(event) {
            event.preventDefault();
            alert('Right click disable in this site!!')
        });
    });
});
<html>
  <head>
    <title>Right click disable in web page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    You write your own code
  </body>
</html>


4

Naturalmente, come per tutti gli altri commenti qui, questo semplicemente non funziona.

Una volta ho costruito una semplice applet Java per un client che ha costretto qualsiasi acquisizione di un'immagine a essere eseguita tramite acquisizione dello schermo e potresti voler prendere in considerazione una tecnica simile. Ha funzionato, entro i limiti, ma penso ancora che sia stata una perdita di tempo.


4
    <script>
        window.oncontextmenu = function () {
            console.log("Right Click Disabled");
            return false;
        }
    </script>

3

Prova questo

<script language=JavaScript>
//Disable right mouse click Script

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>

3

Disabilitare il clic destro sulla tua pagina web è semplice. Ci sono solo alcune righe di codice JavaScript che faranno questo lavoro. Di seguito è riportato il codice JavaScript:

$("html").on("contextmenu",function(e){
   return false;
});

Nel codice sopra, ho selezionato il tag. Dopo aver aggiunto solo quelle tre righe di codice, disabiliterà il tasto destro del mouse sulla tua pagina web.

Fonte: disabilita il clic destro, copia, taglia sulla pagina web usando jQuery


2
 $(document).ready(function () {
            document.oncontextmenu = document.body.oncontextmenu = function () { return false; }
        });

2

So di essere in ritardo, ma voglio creare alcune ipotesi e spiegazioni per la risposta che fornirò.

Posso disabilitare il tasto destro del mouse

Posso disabilitare il clic destro sulla mia pagina web senza usare Javascript?

Sì, utilizzando JavaScript puoi disabilitare qualsiasi evento che si verifica e puoi farlo principalmente solo tramite javaScript. Come, tutto ciò che serve è:

  1. Un hardware funzionante

  2. Un sito Web o da qualche parte da cui è possibile conoscere i codici chiave. Perché ne avrai bisogno.

Ora diciamo che vuoi bloccare il tasto invio, premi qui è il codice:

function prevententer () {
 if(event.keyCode == 13) {
  return false;
 }
}

Per il tasto destro usa questo:

event.button == 2

al posto di event.keyCode. E lo bloccherai.

Voglio chiederlo perché la maggior parte dei browser consente agli utenti di disabilitarlo tramite Javascript.

Hai ragione, i browser ti consentono di usare JavaScripte javascript fa tutto il lavoro per te. Non è necessario impostare nulla, basta l'attributo di script nella testa.

Perché non dovresti disabilitarlo?

La risposta principale e veloce sarebbe che agli utenti non piacerà . Tutti hanno bisogno della libertà, nessuno intendo che nessuno vuole essere bloccato o disabilitato, pochi minuti fa ero in un sito, che mi aveva bloccato dal clic destro e ho sentito il perché? Devi proteggere il tuo codice sorgente? Quindi qui ctrl+shift+Jho aperto il Consolee ora posso andare alla HTML-codescheda. Vai avanti e fermami. Questo non aggiungerà alcun livello di sicurezza alla tua app.

Ci sono molti menu utili nel tasto destro, come Copia, Incolla, Cerca "testo" (in Chrome) e molti altri. Quindi l'utente vorrebbe avere facilità di accesso invece di ricordare molte scorciatoie da tastiera. Chiunque può ancora copiare il contesto, salvare l'immagine o fare quello che vuole.

I browser usano la navigazione del mouse: alcuni browser come Opera usano la navigazione del mouse, quindi se la disabiliti, l'utente odierebbe sicuramente la tua interfaccia utente e gli script.

Quindi questa era la base, stavo per scrivere qualcosa in più sul salvataggio del codice sorgente, ma, lascia che sia la risposta alla tua domanda.

Riferimento ai codici chiave:

Codice tasto e mouse:

http://www.w3schools.com/jsref/event_button.asp

https://developer.mozilla.org/en-US/docs/Web/API/event.button (sarebbe apprezzato anche dagli utenti).

Perché non disabilitare il clic destro:

http://www.sitepoint.com/dont-disable-right-click/


1

Javascript:

document.getElementsByTagName("html")[0].setAttribute("oncontextmenu", "return false"); 

0

Nota importante: dipende dal browser e dal sistema operativo per consentire tale prevenzione o meno!

Dovresti farlo? No . Perché non impedirà all'utente, ma lo infastidirà e basta.

Puoi usarlo? . Esempi: in alcune app Web in cui si desidera avere un menu a comparsa personalizzato, in-game in cui gli utenti potrebbero essere infastiditi quando fanno clic con il pulsante destro del mouse e in altri casi.

Chrome (v65) in Ubuntu 16.04 = PUOI disabilitare il tasto destro del mouse.

Chrome (v65) in Mac OS 10.11 = NON PUOI disabilitare il tasto destro del mouse.

Chrome (v65) in Windows 7 = NON PUOI disabilitare il tasto destro del mouse.

Firefox (v41) in Mac OS 10.11 = PUOI disabilitare il tasto destro del mouse.

Firefox (v43) in Windows 7 = PUOI disabilitare il tasto destro del mouse.

// Vanilla JS way
document.addEventListener('contextmenu', function(e){
    e.preventDefault();
});

// jQuery way
$(document).bind('contextmenu', function(e) {
    e.preventDefault();
});

0

Alcune cose da considerare:

Plugin del browser come "abilita tasto destro" nel Chrome Store esistono per un motivo e non sarai in grado di aggirarli. C'è LETTERAMENTE NIENTE che puoi fare per impedire alle persone di scaricare i tuoi contenuti in quanto devono letteralmente scaricarli per vederli comunque nel loro browser; Le persone ci provano ma è sempre là fuori.

In generale, se il contenuto non deve essere pubblico, non metterlo online.

Inoltre, non poter fare clic con il tasto destro del mouse è un problema di accessibilità e in molti casi costituisce una discriminazione illegale nei confronti di non vedenti, disabili o anziani. Controlla le leggi locali, ma negli Stati Uniti è attivamente contro la legge sotto forma di ADA federale in quanto i non vedenti o gli anziani che potrebbero avere problemi di vista sono una classe legalmente protetta.

Quindi, invece di farlo e di perdere molto tempo e fatica, non preoccuparti nemmeno di provare a farlo. Potrebbe semplicemente fare causa alla tua azienda o far fallire un controllo di conformità.


0

Prova questo codice per disabilitare l'opzione inspect element

    jQuery(document).ready(function() {
    function disableSelection(e) {
        if (typeof e.onselectstart != "undefined") e.onselectstart = function() {
            return false
        };
        else if (typeof e.style.MozUserSelect != "undefined") e.style.MozUserSelect = "none";
        else e.onmousedown = function() {
            return false
        };
        e.style.cursor = "default"
    }
    window.onload = function() {
        disableSelection(document.body)
    };

    window.addEventListener("keydown", function(e) {
        if (e.ctrlKey && (e.which == 65 || e.which == 66 || e.which == 67 || e.which == 70 || e.which == 73 || e.which == 80 || e.which == 83 || e.which == 85 || e.which == 86)) {
            e.preventDefault()
        }
    });
    document.keypress = function(e) {
        if (e.ctrlKey && (e.which == 65 || e.which == 66 || e.which == 70 || e.which == 67 || e.which == 73 || e.which == 80 || e.which == 83 || e.which == 85 || e.which == 86)) {}
        return false
    };

    document.onkeydown = function(e) {
        e = e || window.event;
        if (e.keyCode == 123 || e.keyCode == 18) {
            return false
        }
    };

    document.oncontextmenu = function(e) {
        var t = e || window.event;
        var n = t.target || t.srcElement;
        if (n.nodeName != "A") return false
    };
    document.ondragstart = function() {
        return false
    };
});

1
Grazie per questo frammento di codice, che potrebbe fornire un aiuto limitato a breve termine. Una spiegazione adeguata migliorerebbe notevolmente il suo valore a lungo termine mostrando perché questa è una buona soluzione al problema e lo renderebbe più utile ai futuri lettori con altre domande simili. Si prega di modificare la risposta di aggiungere qualche spiegazione, tra le ipotesi che hai fatto.
Toby Speight,

Questo può essere estremamente facile da ignorare in Chrome: fai clic sui 3 punti accanto all'immagine del tuo profilo> Altri strumenti> Strumenti per gli sviluppatori
sportzpikachu

-1

Utilizzare questa funzione per disabilitare il clic destro. È possibile disabilitare il clic sinistro e toccare anche in base al checking 1 and 0corrispondente

document.onmousedown = rightclickD;
            function rightclickD(e) 
            { 
                e = e||event;
                console.log(e);
                if (e.button == 2) {
                //alert('Right click disabled!!!'); 
                 return false; }
            }

Usare Javascript per fare ciò che già fa l'HTML è una cattiva ingegneria e uno spreco di dati
5
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.