¿Cómo deshabilito el clic derecho en mi página web?

316

¿Puedo desactivar el clic derecho en mi página web sin usar JavaScript? Pregunto esto porque la mayoría de los navegadores permiten al usuario deshabilitar JavaScript.

Si no, ¿cómo uso JavaScript para deshabilitar el clic derecho?

javascript Vinay Pandey
fuente
130
Deshabilitar el clic derecho no es seguridad, solo molesta a los usuarios. Cualquier navegador que no le permita desactivar esto no tiene valor, pero los sitios que lo hacen en primer lugar son terribles.
Dan Olson
17
Si no desea que se tome su contenido, no debe publicarlo en la web. :) Los navegadores modernos incluso pueden anular la capacidad de JavaScript para deshabilitar el clic derecho. Herramientas como Firebug / Web Dev Toolbar hacen que la protección sea inútil.
epascarello
77
Aquí hay un pequeño script de usuario de Chrome / Greesemonkey para volver a habilitar el clic derecho: dl.dropbox.com/u/464119/Programming/javascript/…
ripper234
31
Realmente @DanOlson ... ¿qué se supone que debes hacer si quieres codificar tu propio menú contextual? Tal como se encuentra en cPanel.
Codesmith
30
@epascarello hay ciertos casos en los que deshabilitar el clic derecho es esencial, como en los terminales de quiosco, porque el usuario realmente no lo necesita allí y dejarlo allí puede molestar a los usuarios
Aram

Respuestas:

525

Puede hacerlo con JavaScript agregando un detector de eventos para el evento "contextmenu" y llamando al preventDefault()método:

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

Dicho esto: NO LO HAGAS.

¿Por qué? Porque no logra nada más que usuarios molestos. Además, muchos navegadores tienen una opción de seguridad para no permitir la desactivación del menú del botón derecho (contexto) de todos modos.

No estoy seguro de por qué querrías hacerlo. Si es por una creencia errónea de que puede proteger su código fuente o imágenes de esa manera, piense de nuevo: no puede.

cletus
fuente
86
Usar oncontextmenu="return false"algo más que el cuerpo puede tener sentido, por ejemplo, en un lienzo.
AdrienBrault
62
Estamos implementando en máquinas de kiosco y elegimos esta forma para evitar que los usuarios actualicen la página.
Todd Horst
21
@ToddHorst en ese caso usaría una versión especial de "Kiosco" del navegador sin ninguna interfaz de usuario, que generalmente también está disponible sin ningún menú contextual :)
mihi
17
Los sistemas táctiles a veces asignan ciertos eventos táctiles, como un toque prolongado, al clic derecho (y, por lo tanto, abren el menú contextual). Sin embargo, este comportamiento puede ser indeseable y la única forma significativa de prevenirlo parece ser deshabilitar por completo el menú contextual.
O Mapper
58
Old Thread, pero en caso de que alguien lo lea, no todos los desarrolladores web crean sus sitios web por sí mismos, a veces el cliente acude a usted e insiste en deshabilitar el clic derecho, cuando intenta convencerlo de que solo buscará otro desarrollador que lo haga sin dudarlo
Danny22
122

No

Solo no lo hagas.

No importa lo que haga, no puede evitar que los usuarios tengan acceso total a todos los datos de su sitio web. Cualquier Javascript que codifique puede volverse discutible simplemente desactivando Javascript en el navegador (o usando un complemento como NoScript). Además, no hay forma de deshabilitar la capacidad de cualquier usuario de simplemente "ver la fuente" o "ver la información de la página" (o usar wget) para su sitio.

No vale la pena el esfuerzo. En realidad no funcionará. Hará que su sitio sea activamente hostil para los usuarios. Lo notarán y dejarán de visitar. Hacer esto no tiene ningún beneficio, solo desperdicio de esfuerzo y pérdida de tráfico.

No lo hagas

Actualización: Parece que este pequeño tema ha demostrado ser bastante controvertido con el tiempo. Aun así, mantengo esta respuesta a esta pregunta. A veces la respuesta correcta es un consejo en lugar de una respuesta literal.

Las personas que tropiezan con esta pregunta con la esperanza de descubrir cómo crear menús contextuales personalizados deberían buscar en otro lado, como estas preguntas:

Cuña
fuente
230
Wow, no puedo creer que esta fue una respuesta aceptada. Hay muchos usos válidos para eliminar un clic derecho en una aplicación web bajo condiciones específicas.
GAgnew
84
La verdadera respuesta debería ser:<body oncontextmenu="return false;">
Sebastián Grignoli
18
@GAgnew: Hay usos válidos para reemplazar el menú contextual. No hay usuarios válidos para deshabilitar los clics derechos incondicionalmente y sin manejarlos de una manera útil ...
ThiefMaster
80
Si el usuario quiere hacer un videojuego HTML5, deshabilitar el clic derecho podría ser bastante útil. Por lo general, esto no es deseable, pero decir "NO HAGA" sin el contexto adecuado no es tan útil.
Robson França
51
-1 de mí también. Esta respuesta no es útil. Hay muchas buenas razones para deshabilitar el clic derecho. Por ejemplo, creé una aplicación web que los hospitales usan en la recepción, y los usuarios no tienen conocimientos técnicos. Aunque la aplicación se ejecuta en su navegador web, no entienden por qué aparecen todas las opciones del menú cuando hacen clic con el botón derecho. Recibimos toneladas de preguntas de ayuda preguntándonos para qué son las opciones, de personas que pensaron que eran parte de la aplicación. Deshabilitarlos tenía sentido en ese caso, y lo hace en muchas otras aplicaciones web.
Nicholas
66

La pregunta original era sobre cómo detener el clic derecho dado que el usuario puede deshabilitar JavaScript : que suena malvado y malvado (de ahí las respuestas negativas), pero todos los duplicados se redirigen aquí, a pesar de que muchos de los duplicados piden propósitos menos malvados.

Como usar el botón derecho en juegos HTML5, por ejemplo. Esto se puede hacer con el código en línea anterior, o un poco mejor es algo como esto:

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

Pero si está haciendo un juego, recuerde que el botón derecho activa el evento contextualmenu , pero también activa el mousedown y mouseup regulares eventos . Por lo tanto es necesario comprobar la década de los eventos que propiedad para ver si era la izquierda (que === 1), medio (que === 2), o hacia la derecha el botón (que === 3) de ratón que está disparando el evento.

Aquí hay un ejemplo en jQuery: tenga en cuenta que al presionar el botón derecho del mouse se dispararán tres eventos: el evento mousedown, el evento contextmenu y el 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); 
    }
});

Entonces, si está usando los botones izquierdo y derecho del mouse en un juego, tendrá que hacer una lógica condicional en los controladores del mouse.

Señor presidente
fuente
Si he habilitado dom.event.contextmenu.enableden Firefox, ¿se seguirán activando los eventos mousedowny mouseupaunque contextmenuno lo haga?
robertc
43

Si no le importa alertar al usuario con un mensaje cada vez que intenta hacer clic con el botón derecho, intente agregar esto a su etiqueta corporal

<body oncontextmenu="return false;">

Esto bloqueará todo acceso al menú contextual (no solo desde el botón derecho del mouse sino también desde el teclado).

Sin embargo, como se menciona en las otras respuestas, realmente no tiene sentido agregar un desactivador de clic derecho. Cualquier persona con conocimientos básicos del navegador puede ver la fuente y extraer la información que necesita.

por0
fuente
Sí, pero hay momentos en que quiero compartir brevemente una imagen con alguien que sé que carece de conocimientos básicos del navegador. Desactivar el clic derecho no es 100% infalible, pero si publico la imagen durante unos minutos para permitir que esa persona eche un vistazo, es bastante seguro.
WillO
Los sistemas táctiles a veces asignan ciertos eventos táctiles, como un toque prolongado, al clic derecho (y, por lo tanto, abren el menú contextual). Sin embargo, este comportamiento puede ser indeseable y la única forma significativa de prevenirlo parece ser deshabilitar por completo el menú contextual.
O Mapper
@WillO: Tengo un caso de uso similar que necesito atender, pero para su información, los usuarios siempre recurrirán a capturas de pantalla .
Hassan Baig
28

Si eres un fanático de jquery, usa esto

    $(function() {
        $(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
Vishnu Vikraman
fuente
44
Esto está usando jQuery sin ninguna razón. Esto hace exactamente lo mismo que la declaración de JavaScript única que se encuentra en la respuesta del Sr. Speaker, que se publicó 1 año y medio antes. Por cierto, esa respuesta también incluye una solución jQuery, que nuevamente no necesita. ¿Alguien que haya votado esta respuesta sabe lo que hace? ¿Por qué esto espera a que el evento de documento listo deje de impedir que aparezca el menú contextual? ¿Por qué se usa esto thisdentro del evento listo? ¿Por qué usas en bindlugar de on? Ugh ...
Rudey
20

Primero, no puede lograr esto sin usar una capacidad del lado del cliente. Aquí es donde se ejecuta el JavaScript.

En segundo lugar, si está tratando de controlar lo que un usuario final puede consumir de su sitio, debe repensar cómo muestra esa información. Una imagen tiene una URL pública que se puede obtener a través de HTTP sin la necesidad de un navegador.

La autenticación puede controlar quién tiene acceso a qué recursos.

La marca de agua incrustada en las imágenes puede demostrar que la imagen fue de una persona / empresa específica.

Al final del día, la gestión de recursos es realmente una gestión de usuario / invitado.

La primera regla de Internet, si no quiere que se la tome, ¡no la haga pública!

La segunda regla de Internet, si no quiere que se la lleve, ¡no la ponga en Internet!

Wayne
fuente
20

Si su objetivo es evitar que las personas puedan descargar sus imágenes, como la mayoría de las personas han dicho, deshabilitar el clic derecho es bastante ineficaz.

Suponiendo que está tratando de proteger las imágenes, los métodos alternativos son:

Usando un reproductor flash, los usuarios no pueden descargarlos como tales, pero podrían hacer fácilmente una captura de pantalla.

Si desea ser más incómodo, haga que la imagen sea el fondo de un div, que contiene una imagen transparente, a la -

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

será suficiente para disuadir el robo casual de sus imágenes (vea a continuación una muestra), pero como con todas estas técnicas, es trivial derrotar con una comprensión básica de html.

benofobia
fuente
2
Incluso podría cargar la imagen como base64, para ofuscar aún más el código.
Miguel Bartelsman
16

No puedes lograr lo que estás pidiendo sin usar Javascript. Cualquier otra tecnología que elija utilizar solo puede ayudar a componer la página web en el lado del servidor que se enviará al navegador.

Simplemente no hay una buena solución, y no hay período de solución sin Javascript.

Antonio
fuente
1
E incluso entonces es molesto para los usuarios, sin mencionar que es fácil de evitar.
Manos Dilaverakis
1
Solo he visto páginas que tienen una ventana emergente modal que dice 'el clic derecho está deshabilitado', que luego muestra el menú del botón derecho cuando lo descarta. También muestran el mensaje cuando te desplazas con el panel táctil, lo cual es muy molesto.
Pete Kirkham el
1
Sí, es especialmente molesto ya que generalmente es para evitar que las personas "roben" imágenes que ya están en su disco duro, pero todo lo que hace es evitar que use Context Search: addons.mozilla.org/en-US/firefox/addon/240 . Esos bastardos ...
Calvin
2
Me encanta cómo casi todas las respuestas a esto son "¡Claro, usa JavaScript!"
Charles Wood
14

Si su objetivo es no permitir que los usuarios simplemente guarden sus imágenes, también puede verificar si el objetivo seleccionado es una imagen, solo deshabilite el clic derecho en ese caso. Por lo tanto, el clic derecho se puede utilizar para otros fines. Tomado del código anterior:

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

Esto es solo para eliminar la forma más fácil de guardar sus imágenes, pero aún se puede hacer.

Andrés
fuente
En mi opinión, esta es la mejor manera de hacerlo: como usuario de la web, encuentro que la funcionalidad de clic derecho es útil de vez en cuando, pero como una solución fácil, simple (y sí, fácilmente superable) esto funciona sin ser molesto.
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
fuente
dom.event.contextmenu.enabled
robertc
2
@ aravind3 ¡Utilicé tu ejemplo y funciona de maravilla! Todavía se puede hacer clic en mis imágenes y funcionan de la manera en que se supone que deben hacerlo, pero no se pueden descargar. La razón por la que quería deshabilitar el clic derecho es que los visitantes que solo quieren una imagen y luego se van de inmediato están afectando mi tasa de rebote. Al menos de esta manera, mi tasa de rebote no será tan mala, ya que podría tomarles 1 o 2 minutos para darse cuenta :) ¡¡¡Saludos aravind3 !!!!
coolydude
6

Hazlo como a continuación (también funciona en firefox): 

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

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

Pon este código en tu <head>etiqueta de tu 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>

Esto deshabilitará el clic derecho en toda su página web, pero solo cuando JavaScript esté habilitado.

tejas
fuente
Esto no funciona en Firefox, deshabilita la selección de entrada para escribir formularios :(
ALWAN
5

Había usado este código para deshabilitar el clic derecho en cualquier página web, funciona bien. Puedes 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 fragmento

arvinda kumar
fuente
4

Por supuesto, como todos los demás comentarios aquí, esto simplemente no funciona.

Una vez construí un applet java simple para un cliente que obligaba a realizar cualquier captura de una imagen a través de la captura de pantalla y es posible que desee considerar una técnica similar. Funcionó, dentro de las limitaciones, pero todavía creo que fue una pérdida de tiempo.

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

Prueba esto

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

Deshabilitar el clic derecho en su página web es simple. Solo hay unas pocas líneas de código JavaScript que harán este trabajo. A continuación se muestra el código JavaScript:

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

En el código anterior, he seleccionado la etiqueta. Después de agregar solo esas tres líneas de código, deshabilitará el clic derecho en su página web.

Fuente: deshabilitar el clic derecho, copiar, cortar en la página web usando jQuery

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

Sé que llego tarde, pero quiero crear algunas suposiciones y explicaciones para la respuesta que voy a proporcionar.

¿Puedo desactivar el clic derecho

¿Puedo desactivar el clic derecho en mi página web sin usar Javascript?

Sí, al usar JavaScript puede deshabilitar cualquier evento que ocurra y puede hacerlo principalmente solo con javaScript. Cómo, todo lo que necesitas es:

  1. Un hardware de trabajo

  2. Un sitio web o un lugar desde el que puede aprender sobre los códigos clave. Porque los vas a necesitar.

Ahora digamos que desea bloquear la tecla Intro, presione aquí el código: 

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

Para el clic derecho, use esto: 

event.button == 2

en el lugar de event.keyCode. Y lo bloquearás.

Quiero preguntar esto porque la mayoría de los navegadores permiten a los usuarios deshabilitarlo mediante Javascript.

Tienes razón, los navegadores te permiten usar JavaScript y JavaScript hace todo el trabajo por ti. No necesita configurar nada, solo necesita el atributo de script en la cabeza.

¿Por qué no deberías deshabilitarlo?

La respuesta principal y rápida a eso sería que a los usuarios no les gustará . Todo el mundo necesita libertad, nadie, quiero decir, nadie quiere ser bloqueado o deshabilitado, hace unos minutos estaba en un sitio, que me había bloqueado el hacer clic derecho y sentí por qué. ¿Necesita asegurar su código fuente? Entonces aquí ctrl+shift+Jhe abierto el Consoley ahora puedo ir aHTML-code pestaña. Adelante, detenme. Esto no agregará ninguna capa de seguridad a su aplicación.

Hay muchos menús útiles en el clic derecho, como Copiar, Pegar, Buscar 'texto' en Google (en Chrome) y muchos más. Por lo tanto, al usuario le gustaría tener acceso fácil en lugar de recordar muchos atajos de teclado. Cualquiera puede copiar el contexto, guardar la imagen o hacer lo que quiera.

Los navegadores usan la navegación del mouse: algunos navegadores como Opera usan la navegación del mouse, por lo que si lo desactiva, el usuario definitivamente odiaría su interfaz de usuario y los scripts.

Así que eso era lo básico, iba a escribir un poco más sobre cómo guardar el código fuente jejeje pero, que sea la respuesta a su pregunta.

Referencia a los códigos clave:

Código de tecla y mouse:

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

https://developer.mozilla.org/en-US/docs/Web/API/event.button (también sería apreciado por los usuarios).

¿Por qué no deshabilitar el clic derecho:

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

Afzaal Ahmad Zeeshan
fuente
1

Javascript:

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

Nota importante: ¡Depende del navegador y del sistema operativo para permitir tal prevención o no!

¿Deberías hacerlo? No se . Porque no impedirá al usuario, pero solo lo molestará.

¿Puedes usarlo? Sí . Ejemplos: en algunas aplicaciones web en las que desea tener un menú emergente personalizado, en el juego, donde los usuarios pueden molestarse cuando hacen clic con el botón derecho, y en otros casos.

Chrome (v65) en Ubuntu 16.04 = PUEDES desactivar el clic derecho.

Chrome (v65) en Mac OS 10.11 = NO PUEDES desactivar el clic derecho.

Chrome (v65) en Windows 7 = NO PUEDES desactivar el clic derecho.

Firefox (v41) en Mac OS 10.11 = PUEDES desactivar el clic derecho.

Firefox (v43) en Windows 7 = PUEDE deshabilitar el clic derecho.

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

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

Algunas cosas a considerar:

Los complementos del navegador como "habilitar el clic derecho" en la tienda de Chrome existen por una razón, y no podrá evitarlos. LITERALMENTE NADA puede hacer para evitar que las personas descarguen su contenido, ya que literalmente tienen que descargarlo para incluso verlo en su navegador de todos modos; La gente lo intenta pero siempre está ahí afuera.

En general, si el contenido no debe ser público, no lo ponga en línea.

Además, no poder hacer clic con el botón derecho es un problema de accesibilidad y en muchos casos constituye una discriminación ilegal contra los ciegos, discapacitados o ancianos. Verifique sus leyes locales, pero en los EE. UU. Está activamente en contra de la ley en la forma de la ADA Federal, ya que los ciegos o los ancianos que pueden tener problemas de visión son una clase legalmente protegida.

Entonces, en lugar de hacer esto y perder mucho tiempo y esfuerzo, ni siquiera se moleste en intentar hacer esto. Podría simplemente demandar a su empresa o hacer que falle una auditoría de cumplimiento.

honestduane
fuente
0

Pruebe este código para deshabilitar la opción inspeccionar elemento

    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
fuente
1
Gracias por este fragmento de código, que podría proporcionar una ayuda limitada a corto plazo. Una explicación adecuada mejoraría en gran medida su valor a largo plazo al mostrar por qué esta es una buena solución al problema y lo haría más útil para futuros lectores con otras preguntas similares. Por favor, editar su respuesta a añadir un poco de explicación, incluyendo los supuestos realizados.
Toby Speight
Esto puede ser extremadamente fácil de anular en Chrome: haga clic en los 3 puntos al lado de su foto de perfil> Más herramientas> Herramientas para desarrolladores
sportzpikachu
-1

Use esta función para desactivar el clic derecho. Puede desactivar el clic izquierdo y pulsar también checking 1 and 0correspondiente

document.onmousedown = rightclickD;
            function rightclickD(e) 
            { 
                e = e||event;
                console.log(e);
                if (e.button == 2) {
                //alert('Right click disabled!!!'); 
                 return false; }
            }
Descifrador de códigos
fuente
Usar Javascript para hacer lo que HTML ya hace es una mala ingeniería y un desperdicio
honestduane