Bloccare l'uso del tasto destro del mouse - Funzioni HTML&JS

Indice dei contenuti

In questa nuova guida della serie “Funzioni HTML&JS” descriverò uno script molto particolare che è possibile integrare nelle pagine web di un sito, pensato per limitare e bloccare totalmente l’uso del tasto destro del mouse.

Anche questo articolo è realizzato per spiegare JavaScript e HTML a principianti, o per chi si avvicina le prime volte a questi linguaggi e che ha poca dimestichezza con la programmazione e sviluppo di siti web.

Inoltre per seguire questa procedura non si necessitano di particolari abilità o conoscenze dei linguaggi, in special modo JavaScript in quanto basterà seguire la spiegazione e copiare i codici riportati come da istruzioni.

Tuttavia consiglio di conoscere un minimo di HTML (e CSS per una gestione grafica), perché tutti gli script e codici si basano su quest’ultimo e, seppur l’integrazione degli script sia semplice, senza una base di HTML potrebbe risultare particolarmente difficile o addirittura impossibile.

Detto questo, vediamo ora come bloccare l’uso del tasto destro del mouse all’interno di una pagine o di un intero sito web.

Script per il blocco del tasto destro del mouse

A cosa serve?

Già il titolo stesso spiega la funzione di questo script. Integrando uno specifico codice sarà possibile limitare o bloccare del tutto l’uso del tasto destro del mouse in una pagina internet del proprio sito.

Il blocco consiste nel rendere non visibile la finestra di dialogo che solitamente compare cliccando su questo tasto. Quindi premendolo non si avranno cambiamenti nella pagina visitata o sull’intero sito in cui è presente il codice.

Questa particolare funzione può essere giustificata per differenti motivi:

Bloccare il download di immagini

Molti utenti hanno la convinzione che basti rendere inutilizzabile il tasto destro del mouse per bloccare lo scaricamento/download dei file media e delle immagini presenti in una pagina.

Voglio sfatare subito il mito: Questo ragionamento può essere valido solo se abbiamo a che fare con persone inesperte in campo informatico o del web. Perché nel caso di utenti esperti, prelevare un immagine apparentemente bloccata è un gioco da ragazzi, come ho anche spiegato in questo articolo.

Copiare testi

Altra motivazione potrebbe essere di evitare la copia dei contenuti testuali presenti nella pagina.

Anche in questo caso però la limitazione è facilmente superabile. Esistono plugin/estensioni per il browser che permettono di copiare ogni testo nel sito anche se vincolato o apparentemente bloccato.

Accedere alla console del browser

In numerosi articoli abbiamo visto come sia possibile accedere facilmente alla console di gestione/debugging del browser in uso, per visualizzare il codice sorgente di una pagina web.

Tornando allo script, l’idea di base sarebbe quella di non far accedere dall’esterno alla console del browser per non far visualizzare il codice di programmazione del sito.

Serve o non serve?

Se sei qui per questo motivo, ti consiglio di leggere il nostro articolo dedicato.

Queste erano le motivazioni più comuni che spingono neo-sviluppatori a incorporare il codice nelle loro pagine. In qualunque caso ti consiglio di valutare bene l’installazione perché potrebbe portare a grandi limitazioni e una user-experience peggiore.

Il codice

Il codice JavaScript che determina il blocco dell’uso del tasto destro del mouse è il seguente. Copialo ed incollalo nella pagina HTML che preferisci:

<script>   <!-- blocco tasto destro del mouse -->
  function blocco_mousedx()
   { return(false); }
  document.oncontextmenu = blocco_mousedx;
</script>

In questa pagina non verrà applicato lo script, anche se utile a scopo dimostrativo, non consentirebbe la copia del codice interessato (HTML e JS) dall’esterno.

Consiglio: incolla lo script nel footer della pagina, in modo da non allungare il tempo di caricamento della stessa e dare priorità agli elementi visivi utili.

Come puoi notare il codice è in formato javascript, contenuto in tag HTML <script></script>, quindi è da incollare in un documento con formato .html.

Per incorporarlo in un documento esterno con formato .js ti basterà rimuovere i tag HTML ed incollarlo senza. In quest’ultimo caso però dovrai richiamare il file .js come risorsa esterna nel documento .html per farlo funzionare.

Ora al click del mouse la finestra di dialogo sarà scomparsa e non si potrà accedere al classico menu delle impostazione e proprietà del browser sulla pagina.

Installare lo script in una pagina WordPress

Come caso di un documento HTML, anche con WordPress è possibile inserire lo script come fosse una semplice parte del testo (o quasi).

Il CMS mette a disposizione un widget dedicato ai codici HTML personalizzati. Se usi il Gutenberg Editor di WordPress ti basterà cliccare sull’icona (+) per aggiungere una nuova sezione all’articolo e cercare il campo HTML personalizzato nel menu Formattazione.

Apri la sezione ed incolla il codice riportato precedentemente, poi salva l’articolo per visualizzare gli effetti.

Hai avuto difficoltà con questa funzione? Faccelo sapere nei commenti!

Ricordati di iscriverti alla nostra Newsletter per restare aggiornato e seguici su Facebook.

Articoli Recenti:

Bloccare l’uso del tasto destro del mouse – Funzioni HTML&JS