Como desabilito o botão direito do mouse na minha página da web?

316

Posso desativar o botão direito do mouse na minha página da Web sem usar JavaScript? Eu pergunto isso porque a maioria dos navegadores permite ao usuário desativar o JavaScript.

Caso contrário, como uso o JavaScript para desativar o botão direito?

javascript Vinay Pandey
fonte
130
Desabilitar o clique direito não é segurança, é apenas irritar seus usuários. Qualquer navegador que não permita que você desabilite isso é inútil, mas os sites que fazem isso em primeiro lugar são terríveis.
11119 Dan Olson
17
Se você não deseja que seu conteúdo seja levado, não deve publicá-lo na web. :) Os navegadores modernos podem até substituir a capacidade do JavaScript de desativar o botão direito. Ferramentas como Firebug / Web Dev Toolbar tornam a proteção inútil.
epascarello
7
aqui é um script de usuário pequena cromo / greesemonkey para reativar o botão direito: dl.dropbox.com/u/464119/Programming/javascript/...
ripper234
31
Realmente @DanOlson ... o que você deve fazer se quiser codificar seu próprio menu de atalho? Como o encontrado no cPanel.
CodeSmith
30
@epascarello há certos casos que a desativação do botão direito é essencial, como em terminais de quiosques, bceause usuário faz realmente não precisa dele lá e deixá-lo lá pode realmente incomodar os usuários
Aram

Respostas:

525

Você pode fazer isso com JavaScript adicionando um ouvinte de evento para o evento "contextmenu" e chamando o preventDefault()método:

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

Dito isto: NÃO FAÇA.

Por quê? Porque ele alcança nada além de usuários irritantes. Muitos navegadores também têm uma opção de segurança para impedir a desativação do menu do botão direito do mouse (contexto).

Não sei por que você gostaria. Se é por alguma crença equivocada que você pode proteger seu código-fonte ou imagens dessa maneira, pense novamente: você não pode.

cleto
fonte
86
Usar oncontextmenu="return false"algo além do corpo pode fazer sentido, por exemplo, em uma tela.
precisa saber é o seguinte
62
Estamos implantando em máquinas de quiosque e escolhemos esta maneira para impedir que os usuários atualizem a página.
Todd Horst
21
@ToddHorst, nesse caso, eu usaria um especial "Kiosk" versão do navegador sem qualquer interface do usuário, que geralmente também está disponível sem quaisquer menus de contexto :)
mihi
17
Às vezes, os sistemas habilitados para toque mapeiam determinados eventos de toque, como um toque longo, com o botão direito do mouse (e, portanto, abrem o menu de contexto). No entanto, esse comportamento pode ser indesejável e a única maneira significativa de evitá-lo parece desabilitar completamente o menu de contexto.
OR Mapper
58
Tópico Antigo, mas no caso de alguém ler, nem todos os desenvolvedores da Web criam seus sites para si mesmos, às vezes o cliente chega até você e insiste em desativar o clique direito, quando você tenta convencê-lo, ele apenas procura outro desenvolvedor que o faça sem hesitação
Danny22
122

NÃO

Apenas não.

Não importa o que você faça, você não pode impedir que os usuários tenham acesso total a todos os dados do seu site. Qualquer Javascript que você codificar pode ser discutido simplesmente desativando o Javascript no navegador (ou usando um plugin como o NoScript). Além disso, não há como desativar a capacidade de qualquer usuário simplesmente "visualizar a fonte" ou "visualizar informações da página" (ou usar o wget) no seu site.

Não vale a pena o esforço. Na verdade, não vai funcionar. Isso tornará seu site hostil aos usuários. Eles vão perceber isso e parar de visitar. Não há benefício em fazer isso, apenas esforço desperdiçado e tráfego perdido.

Não.

Atualização: Parece que este pequeno tópico se mostrou bastante controverso ao longo do tempo. Mesmo assim, eu mantenho esta resposta a esta pergunta. Às vezes, a resposta correta é um conselho, em vez de uma resposta literal.

As pessoas que se deparam com essa questão na esperança de descobrir como criar menus de contexto personalizados devem procurar em outro lugar, como estas:

Cunha
fonte
230
Uau, não acredito que essa foi uma resposta aceita. Existem muitos usos válidos para remover um clique com o botão direito do mouse em um aplicativo da Web sob condições específicas.
usar o seguinte comando
84
A resposta real deve ser: #<body oncontextmenu="return false;">
Sebastián Grignoli 20/03/12
18
@ GAgnew: Existem usos válidos para substituir o menu de contexto. Não há usuários válidos para desativar rightclicks incondicionalmente e sem manuseá-los em um forma- útil
ThiefMaster
80
Se o usuário quiser criar um videogame HTML5, desativar o botão direito do mouse pode ser bastante útil. Normalmente, isso não é desejável, mas apenas dizer "NÃO" sem o contexto adequado não é tão útil.
Robson França
51
-1 de mim também. Esta resposta não é útil. Existem muitas boas razões para desativar o botão direito. Por exemplo, criei um aplicativo Web que os hospitais usam na recepção e os usuários não são tecnicamente esclarecidos. Embora o aplicativo esteja sendo executado no navegador da Web, eles não entendem por que todas as opções de menu aparecem quando clicam com o botão direito. Temos inúmeras perguntas de ajuda, perguntando para que servem as opções, de pessoas que pensavam que eram parte do aplicativo. Desativá-los fazia sentido nesse caso, e ocorre em muitos outros aplicativos da web.
Nicholas
66

A pergunta original era sobre como parar com o botão direito, pois o usuário pode desativar o JavaScript : que parece nefasto e maligno (daí as respostas negativas) - mas todas as duplicatas são redirecionadas aqui, mesmo que muitas das duplicatas estejam pedindo menos propósitos malignos.

Como usar o botão direito do mouse em jogos HTML5, por exemplo. Isso pode ser feito com o código embutido acima, ou um pouco melhor é algo como isto:

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

Mas se você estiver fazendo um jogo, então lembre-se que o botão de clique com o botão direito dispara o contextmenu evento - mas também dispara o regulares mousedown e mouseup eventos também. Portanto, você precisa verificar qual propriedade do evento está para ver se foi o botão esquerdo (que === 1), meio (que === 2) ou direito (que === 3) do mouse que está disparando o evento.

Aqui está um exemplo no jQuery - observe que pressionar o botão direito do mouse disparará três eventos: o evento mousedown, o evento contextmenu e o 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); 
    }
});

Portanto, se você estiver usando os botões esquerdo e direito do mouse em um jogo, precisará fazer alguma lógica condicional nos manipuladores do mouse.

Sr. Orador
fonte
Se eu tiver ativado dom.event.contextmenu.enabledno Firefox, os eventos mousedowne mouseupainda serão acionados , mesmo que contextmenunão sejam?
Robertc
43

Se você não se preocupa em alertar o usuário com uma mensagem toda vez que ele tenta clicar com o botão direito, tente adicioná-lo à sua etiqueta corporal

<body oncontextmenu="return false;">

Isso bloqueará todo o acesso ao menu de contexto (não apenas com o botão direito do mouse, mas também com o teclado).

No entanto, como mencionado nas outras respostas, realmente não faz sentido adicionar um desabilitador de clique direito. Qualquer pessoa com conhecimento básico do navegador pode visualizar a fonte e extrair as informações necessárias.

by0
fonte
Sim, mas há momentos em que quero compartilhar brevemente uma imagem com alguém que estou ciente de que faltam conhecimentos básicos sobre o navegador. Desativar o clique direito não é 100% infalível, mas se eu postar a imagem por apenas alguns minutos para permitir que a pessoa dê uma olhada, é bastante seguro.
Willo
Às vezes, os sistemas habilitados para toque mapeiam determinados eventos de toque, como um toque longo, com o botão direito do mouse (e, assim, abrem o menu de contexto). No entanto, esse comportamento pode ser indesejável e a única maneira significativa de evitá-lo parece desabilitar completamente o menu de contexto.
OU Mapper
@ WillO: Eu tenho um caso de uso semelhante que preciso atender, mas, para sua informação, os usuários sempre recorrerão a capturas de tela .
Hassan Baig
28

Se você é um fã de jquery, use este

    $(function() {
        $(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
Vishnu Vikraman
fonte
4
Isso está usando o jQuery sem motivo. Isso faz exatamente o mesmo que a única declaração JavaScript encontrada na resposta do Sr. Speaker, que foi publicada 1 ano e meio antes disso. A propósito, essa resposta também inclui uma solução jQuery, da qual novamente você não precisa. Alguém que aprovou esta resposta sabe o que isso faz? Por que isso aguarda o evento pronto para documento parar de impedir que o menu de contexto apareça? Por que isso é usado thisdentro do evento ready? Por que você usa em bindvez de on? Ugh ...
Rudey 28/03
20

Primeiro, você não pode conseguir isso sem usar um recurso do lado do cliente. É aqui que o javascript é executado.

Em segundo lugar, se você estiver tentando controlar o que um usuário final pode consumir em seu site, precisará repensar como exibe essas informações. Uma imagem tem um URL público que pode ser buscado via HTTP sem a necessidade de um navegador.

A autenticação pode controlar quem tem acesso a quais recursos.

A marca d'água incorporada nas imagens pode provar que a imagem era de uma pessoa / empresa específica.

No final do dia, o gerenciamento de recursos é realmente um gerenciamento de usuários / convidados.

A primeira regra da Internet, se você não quiser, não a torne pública!

A segunda regra da Internet, se você não quiser, não a coloque na Internet!

Wayne
fonte
20

Se seu objetivo é impedir que as pessoas possam baixar suas imagens, como a maioria das pessoas disse, desativar o botão direito do mouse é praticamente ineficaz.

Supondo que você esteja tentando proteger imagens, os métodos alternativos são:

Usando um flash player, os usuários não podem baixá-los como tal, mas podem facilmente capturar a tela.

Se você quiser ser mais desagradável, torne a imagem o fundo de uma div, contendo uma imagem transparente, à la -

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

será suficiente para impedir o roubo casual de suas imagens (veja uma amostra abaixo), mas como em todas essas técnicas, é trivial derrotar com um entendimento básico de html.

benofobia
fonte
2
Você pode até carregar a imagem como base64, para ofuscar ainda mais o código.
Miguel Bartelsman
16

Você não pode realizar o que está solicitando sem usar o Javascript. Qualquer outra tecnologia que você optar por usar só pode ajudar a compor a página da Web no lado do servidor a ser enviada ao navegador.

Simplesmente não existe uma boa solução e não existe um período de solução sem Javascript.

Anthony
fonte
1
E mesmo assim é irritante para os usuários, sem mencionar fácil de ignorar.
Manos Dilaverakis
1
Eu só vi páginas com um pop-up modal dizendo 'clique com o botão direito desativado', que mostra o menu com o botão direito quando você o dispensa. Eles também exibem a mensagem quando você rola usando o trackpad, o que é muito irritante.
Pete Kirkham
1
Sim, é especialmente irritante, pois geralmente é para impedir que as pessoas "roubem" imagens que já estão no disco rígido, mas tudo o que faz é impedir que eu use a Pesquisa de Contexto: addons.mozilla.org/en-US/firefox/addon/240 . Aqueles bastardos ...
Calvin
2
Eu amo como quase todas as respostas para isso são "Claro, use javascript!"
Charles Wood
14

Se seu objetivo é impedir que os usuários salvem suas imagens, você também pode verificar se o destino clicado é uma imagem, apenas desative o clique direito nesse caso. Portanto, o clique direito pode ser usado para outros fins. Retirado do código acima:

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

Isso é apenas para tirar a maneira mais fácil de salvar suas imagens, mas ainda pode ser feito.

Andrew
fonte
Este é, na minha opinião, o melhor caminho a percorrer - como usuário da Web, acho que a funcionalidade do botão direito do mouse é útil de tempos em tempos, mas como uma solução fácil, simples (e sim, fácil de superar), isso funciona sem ser irritante.
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>

aravind3
fonte
dom.event.contextmenu.enabled
Robertc
2
@ aravind3 Eu usei o seu exemplo e funciona muito bem! Minhas imagens ainda são clicáveis ​​e funcionam da maneira que deveriam, mas não podem ser baixadas. O motivo pelo qual desejei desativar o clique com o botão direito é que os visitantes que desejam apenas uma imagem e depois saem imediatamente estão afetando minha taxa de rejeição. Pelo menos dessa maneira, minha taxa de rejeição não será tão ruim, pois pode levar 1 ou 2 minutos para descobrir :) Felicidades aravind3 !!!!
coolydude
6

Faça como abaixo (também funciona no firefox): 

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

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

Coloque esse código na sua <head>tag da sua página.

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

Isso desativará o clique direito em toda a página da web, mas somente quando o JavaScript estiver ativado.

tejas
fonte
Isso não funciona no firefox, desabilita a seleção de entrada para a digitação de formulários :(
ALWAN
5

Eu tinha usado esse código para desativar o botão direito em qualquer página da Web, está funcionando bem. Você pode usar este código

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>
Expandir snippet

arvinda kumar
fonte
4

Obviamente, como em todos os outros comentários aqui, isso simplesmente não funciona.

Certa vez, construí um miniaplicativo java simples para um cliente que força a captura de uma imagem a ser feita através da captura de tela e você pode considerar uma técnica semelhante. Funcionou, dentro das limitações, mas ainda acho que foi uma perda de tempo.

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

Tente isto

<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>
Dipesh
fonte
3

Desabilitar o clique direito na sua página da web é simples. Existem apenas algumas linhas de código JavaScript que farão esse trabalho. Abaixo está o código JavaScript:

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

No código acima, eu selecionei a tag. Depois de adicionar apenas essas três linhas de código, o botão direito do mouse será desativado na sua página da web.

Fonte: Desative o botão direito, copie, corte na página da Web usando jQuery

Faruque Ahamed Mollick
fonte
2 
 $(document).ready(function () {
            document.oncontextmenu = document.body.oncontextmenu = function () { return false; }
        });
soheil bijavar
fonte
2

Sei que estou atrasado, mas quero criar algumas suposições e explicações para a resposta que vou fornecer.

Posso desativar o botão direito do mouse

Posso desativar o botão direito do mouse na minha página da web sem usar o Javascript?

Sim, usando JavaScript, você pode desativar qualquer evento que ocorra e, principalmente, apenas com javaScript. Como tudo que você precisa é:

  1. Um hardware funcional

  2. Um site ou um local no qual você pode aprender sobre os códigos de chave. Porque você vai precisar deles.

Agora, digamos que você queira bloquear a tecla Enter, pressione aqui é o código: 

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

Para o clique direito, use isto: 

event.button == 2

no lugar de event.keyCode . E você vai bloquear.

Quero perguntar isso porque a maioria dos navegadores permite que os usuários o desabilitem por Javascript.

Você está certo, os navegadores permitem que você use JavaScript e o javascript faz todo o trabalho para você. Você não precisa configurar nada, apenas o atributo de script na cabeça.

Por que você não deve desativá-lo?

A principal e a resposta rápida para isso seria: os usuários não vão gostar . Todo mundo precisa de liberdade, ninguém, quero dizer, ninguém quer ser bloqueado ou desativado, alguns minutos atrás, eu estava em um site que me impediu de clicar com o botão direito e senti por quê? Você precisa proteger seu código fonte? Então aqui ctrl+shift+Jeu abri o Consolee agora posso ir paraHTML-code aba. Vá em frente e me pare. Isso não adicionará nenhuma camada de segurança ao seu aplicativo.

Existem muitos menus úteis no botão direito do mouse, como Copiar, Colar, Pesquisar no Google por 'texto' (no Chrome) e muito mais. Portanto, o usuário gostaria de obter facilidade de acesso, em vez de se lembrar de muitos atalhos de teclado. Qualquer um ainda pode copiar o contexto, salvar a imagem ou fazer o que quiser.

Os navegadores usam a navegação do mouse: alguns navegadores, como o Opera, usam a navegação do mouse; portanto, se você a desabilitar, o usuário com certeza odiará a interface do usuário e os scripts.

Então esse foi o básico, eu ia escrever um pouco mais sobre como salvar o código-fonte hehehe, mas deixe que seja a resposta para sua pergunta.

Referência aos códigos de chave:

Código da tecla e do botão do mouse:

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

https://developer.mozilla.org/en-US/docs/Web/API/event.button (também seria apreciado pelos usuários).

Por que não desativar o botão direito:

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

Afzaal Ahmad Zeeshan
fonte
1

Javascript:

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

Nota importante: Depende do navegador e do SO para permitir ou não essa prevenção!

Você deveria fazer isso? Não . Porque isso não impedirá o usuário, mas apenas o irritará.

Você pode usá-lo? Sim . Exemplos: em alguns aplicativos da web em que você deseja ter um menu pop-up personalizado, no jogo, onde os usuários podem ficar aborrecidos quando, por engano, clicam com o botão direito do mouse e em outros casos.

Chrome (v65) no Ubuntu 16.04 = Você pode desativar o botão direito do mouse.

Chrome (v65) no Mac OS 10.11 = NÃO PODE desativar o botão direito.

Chrome (v65) no Windows 7 = NÃO PODE desativar o botão direito.

Firefox (v41) no Mac OS 10.11 = Você pode desativar o botão direito do mouse.

Firefox (v43) no Windows 7 = Você pode desativar o botão direito do mouse.

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

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

Algumas coisas a considerar:

Os plug-ins de navegador como "ativar o botão direito" na loja do Chrome existem por uma razão e você não poderá contorná-los. Não há literalmente nada que você possa fazer para impedir que as pessoas baixem seu conteúdo, pois elas literalmente precisam baixá-lo para até mesmo vê-lo no navegador; As pessoas tentam, mas sempre está lá fora.

Em geral, se o conteúdo não deve ser público, não o coloque online.

Além disso, não conseguir clicar com o botão direito do mouse é um problema de acessibilidade e, em muitos casos, constitui discriminação ilegal contra cegos, deficientes ou idosos. Verifique as leis locais, mas nos EUA é ativamente contra a lei na forma da ADA Federal, pois os cegos ou idosos que podem ter problemas de visão são uma classe protegida legalmente.

Então, ao invés de fazer isso e desperdiçar muito tempo e esforço, nem se preocupe em tentar fazer isso. Isso poderia simplesmente levar sua empresa a ser processada ou fazer com que falhassem em uma auditoria de conformidade.

honestduane
fonte
0

Experimente este código para desativar a opção de elemento de inspeção

    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
    };
});
Agan116
fonte
1
Obrigado por este trecho de código, que pode fornecer ajuda limitada a curto prazo. Uma explicação adequada melhoraria bastante seu valor a longo prazo, mostrando por que essa é uma boa solução para o problema e a tornaria mais útil para futuros leitores com outras perguntas semelhantes. Por favor edite sua resposta para adicionar alguma explicação, incluindo as suposições que você fez.
Toby Speight
Isso pode ser extremamente fácil de substituir no Chrome: clique nos 3 pontos ao lado da foto do seu perfil> Mais Ferramentas> Ferramentas do desenvolvedor
sportzpikachu
-1

Use esta função para desativar o clique direito. Você pode desativar o clique esquerdo e tocar também checking 1 and 0correspondendo

document.onmousedown = rightclickD;
            function rightclickD(e) 
            { 
                e = e||event;
                console.log(e);
                if (e.button == 2) {
                //alert('Right click disabled!!!'); 
                 return false; }
            }
CodeBreaker
fonte
Usar Javascript para fazer o que o HTML já faz é péssimo em engenharia e desperdício
honestduane