javascript - que - deshabilitar click derecho en mi pagina web
¿Cómo desactivo el clic derecho en mi página web? (23)
¿Puedo deshabilitar el clic derecho en mi página web sin usar JavaScript? Pido esto porque la mayoría de los navegadores permiten al usuario deshabilitar JavaScript.
Si no, ¿cómo utilizo JavaScript para deshabilitar el clic derecho?
Desactivar clic derecho en el sitio:
<body oncontextmenu="return false">
o el siguiente método es:
<style>
body {
-webkit-user-select: none; /* Chrome all / Safari all */
-o-user-select: none;
user-select: none;
-webkit-touch-callout:none;
}
</style>
Desactivar el clic derecho en su página web es simple. Hay solo unas pocas líneas de código JavaScript que harán este trabajo. A continuación se muestra el código de 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, se deshabilitará el clic derecho en su página web.
Fuente: Desactive el clic derecho, copiar, cortar en la página web usando jQuery
Hazlo como a continuación (también funciona en Firefox):
$(document).on("contextmenu",function(e){
if( e.button == 2 ) {
e.preventDefault();
callYourownFucntionOrCodeHere();
}
return true;
});
Javascript:
document.getElementsByTagName("html")[0].setAttribute("oncontextmenu", "return false");
La pregunta original era sobre cómo detener el clic con el botón derecho dado que el usuario puede deshabilitar JavaScript : que suena nefasto y malvado (de ahí las respuestas negativas), pero todos los duplicados se redireccionan aquí, aunque muchos de los duplicados piden menos propósitos perversos.
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 hace clic en el evento de menú contextual , pero también dispara los eventos normales de ratón y ratón . Por lo tanto, debe comprobar qué evento para ver si fue el botón izquierdo (que === 1), el medio (que === 2) o el botón derecho (que === 3) que dispara el evento.
Aquí hay un ejemplo en jQuery: tenga en cuenta que al presionar el botón derecho del mouse se activarán tres eventos: el evento del ratón, el evento del menú contextual 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ás usando los botones izquierdo y derecho del mouse en un juego, tendrás que hacer algo de lógica condicional en los controladores del mouse.
No puedes lograr lo que estás pidiendo sin usar Javascript. Cualquier otra tecnología que pueda elegir usar solo puede ayudar a componer la página web en el lado del servidor para enviarla al navegador.
Simplemente no hay una buena solución, y no hay un período de solución sin Javascript.
Ponga este código en su etiqueta <head> de su 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.
Por supuesto, según todos los demás comentarios aquí, esto simplemente no funciona.
Una vez construí un applet de Java simple para un cliente que obligó a realizar cualquier captura de una imagen a través de la captura de pantalla y quizás desee considerar una técnica similar. Funcionó, dentro de las limitaciones, pero sigo pensando que fue una pérdida de tiempo.
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, entonces debe reconsiderar cómo muestra esa información. Una imagen tiene una URL pública que se puede buscar 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 incorporada en las imágenes puede probar 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 tomen, ¡no la haga pública!
La segunda regla de Internet, si no quiere que se use, ¡no la ponga en Internet!
Sé que llego tarde, pero quiero crear algunas suposiciones y explicaciones para la respuesta que voy a proporcionar.
¿Puedo desactivar el clic derecho
¿Puedo deshabilitar el clic derecho en mi página web sin usar Javascript?
Sí, mediante el uso de JavaScript puede deshabilitar cualquier evento que ocurra y puede hacerlo principalmente solo con javaScript. Cómo, todo lo que necesitas es:
Un hardware de trabajo
Un sitio web o un lugar desde el cual puede aprender sobre los códigos de tecla. Porque los vas a necesitar.
Ahora digamos que quieres bloquear la tecla enter. Aquí está el código:
function prevententer () {
if(event.keyCode == 13) {
return false;
}
}
Para el click derecho usa 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 con Javascript.
Tienes razón, los navegadores te permiten usar JavaScript y javascript hace todo el trabajo por ti. No necesitas configurar nada, solo necesitas el atributo de script en la cabeza.
¿Por qué no deberías deshabilitarlo?
La respuesta principal y rápida sería que a los usuarios no les va a gustar . Todos necesitamos libertad, nadie, quiero decir, nadie quiere ser bloqueado o deshabilitado, hace unos minutos estaba en un sitio, lo que me había impedido hacer clic derecho y sentí por qué. ¿Necesitas asegurar tu código fuente? Luego, aquí ctrl+shift+J , he abierto la Console y ahora puedo ir a la pestaña de HTML-code . Adelante y deténme. Esto no agregará ninguna capa de seguridad a su aplicación.
Hay muchos menús útiles en el botón derecho, como Copiar, Pegar, Buscar en Google para "texto" (en Chrome) y muchos más. Así que al usuario le gustaría tener un 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 utilizan la navegación del mouse: algunos navegadores, como Opera, utilizan la navegación del mouse, por lo que si la desactiva, el usuario definitivamente odiará su interfaz de usuario y los scripts.
Así que eso era lo básico, iba a escribir algo más sobre cómo guardar el código fuente, jejeje, pero sea la respuesta a tu pregunta.
Referencia a los códigos clave:
Código de tecla y botón del mouse:
http://www.w3schools.com/jsref/event_button.asp
https://developer.mozilla.org/en-US/docs/Web/API/event.button (también será apreciado por los usuarios).
¿Por qué no desactivar el clic derecho:
Si eres fan de jQuery, usa este
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
Si está utilizando jquery, puede probar este código:
$(document).bind("contextmenu", function (event) {
event.preventDefault();
));
Vea esto: http://www.landcoder.com/4-dynamic-interactive-code-snippets-jquery-705#disablerightclick
Si no le importa alertar al usuario con un mensaje cada vez que intenta hacer clic derecho, intente agregar esto a su etiqueta de cuerpo
<body oncontextmenu="return false;">
Esto bloqueará todos los accesos al menú contextual (no solo desde el botón derecho del ratón, sino también desde el teclado).
Sin embargo, como se mencionó en las otras respuestas, realmente no tiene sentido agregar un desactivador de clic derecho. Cualquier persona con conocimientos básicos de navegador puede ver la fuente y extraer la información que necesita.
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 intenta proteger las imágenes, los métodos alternativos son:
Usando un reproductor flash, los usuarios no pueden descargarlos como tales, pero podrían hacer una captura de pantalla fácilmente.
Si desea ser más incómodo, convierta la imagen en el fondo de un div, que contenga 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 de vencer con una comprensión básica de html.
Si su objetivo es no permitir que los usuarios simplemente guarden sus imágenes, también puede verificar si el objetivo al que se hizo clic es una imagen, solo deshabilite el clic derecho en ese caso. Así que el click derecho puede ser usado para otros propósitos. 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.
Yo había usado este código para deshabilitar el clic derecho en cualquier página web, está funcionando 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>
NO HACER
Solo no lo hagas
No importa lo que haga, no puede evitar que los usuarios tengan acceso completo a cada bit de datos en su sitio web. Cualquier JavaScript que usted codifique se puede convertir en discutible simplemente desactivando Javascript en el navegador (o usando un plugin como NoScript). Además, no hay manera de deshabilitar la capacidad de cualquier usuario para 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 hostil para los usuarios. Notarán esto y dejarán de visitar. No hay beneficio en hacer esto, solo esfuerzo desperdiciado y tráfico perdido.
No lo hagas
Actualización: Parece que este pequeño tema ha resultado 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 se topan con esta pregunta con la esperanza de descubrir cómo crear menús contextuales personalizados deben buscar en otra parte, como estas preguntas:
- Creación de menús contextuales personalizados con el botón derecho para mi aplicación web , que se basa en jQuery
- Cómo agregar un menú de clic derecho personalizado a una página web , que utiliza javascript / html puro
Nota importante: ¡Depende del navegador y del sistema operativo para permitir tal prevención o no!
¿Deberías hacerlo? No Porque no impedirá que el usuario, pero simplemente lo molestará.
¿Puedes usarlo? Si Ejemplos: en algunas aplicaciones web en las que desea personalizar el menú emergente, en el juego donde los usuarios pueden sentirse molestos por error al hacer clic con el botón derecho y 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 deshabilitar el clic derecho.
Firefox (v43) en Windows 7 = PUEDES desactivar el clic derecho.
// JS way
document.addEventListener(''contextmenu'', function(e){
e.preventDefault();
});
// jQuery way
$(document).bind(''contextmenu'', function(e) {
e.preventDefault();
});
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>
Puede hacerlo con JavaScript agregando un detector de eventos para el evento "contextmenu" y llamando al preventDefault() :
document.addEventListener(''contextmenu'', event => event.preventDefault());
Dicho esto: NO LO HAGAS.
¿Por qué? Porque no logra nada más que molestos usuarios. Además, muchos navegadores tienen una opción de seguridad para no permitir la desactivación del menú de clic derecho (contexto) de todos modos.
No estoy seguro de por qué querrías Si está fuera de la creencia errónea de que puede proteger su código fuente o las imágenes de esa manera, piense de nuevo: no puede.
<script>
window.oncontextmenu = function () {
console.log("Right Click Disabled");
return false;
}
</script>
$(document).ready(function () {
document.oncontextmenu = document.body.oncontextmenu = function () { return false; }
});
<!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>