Deshabilitar el menú contextual del botón derecho en HTML
- Posibles razones para deshabilitar el clic derecho
- Por qué deshabilitar el clic derecho no es una buena idea
- Deshabilite el clic derecho usando el controlador de eventos HTML
- Deshabilitar el clic derecho usando JavaScript
- Deshabilitar clic derecho en las imágenes
Este artículo se concentrará en el menú contextual del botón derecho del navegador. Aprenderemos por qué los desarrolladores piensan que deberían deshabilitar el menú contextual y también observaremos las razones por las que no deberían hacerlo.
Más adelante, veremos diferentes estrategias para deshabilitar el clic derecho en nuestros sitios web.
Posibles razones para deshabilitar el clic derecho
Aquí explicaremos por qué debemos abstenernos de deshabilitar el botón derecho del ratón en nuestros sitios web.
Como bloguero o desarrollador, no desea que le roben su trabajo después de haber trabajado ardua y creativamente para producirlo. Si invirtió mucho tiempo y esfuerzo en crear un diseño, una imagen o un fragmento de texto, es posible que desee protegerlo evitando los clics con el botón derecho en su sitio web.
Con frecuencia nos encontramos con sitios web que deshabilitan el clic derecho. Esto puede parecer una excelente idea, pero no lo es.
¿Por qué? Discutiremos esto más tarde. Primero descubramos por qué creemos que necesitamos deshabilitar el clic derecho.
Para proteger el contenido
Cada sitio web tiene alguna información escrita en él. Los escritores a veces dedican mucho tiempo a crear el contenido más valioso y práctico para sus sitios web.
Nadie quiere que su trabajo se publique en otro lugar con una identidad diferente. Por lo tanto, deshabilitan el clic derecho para evitar la duplicación y la utilización de su contenido para ser copiado y utilizado en otros sitios web.
Para proteger las imágenes
La mayoría de las veces, los propietarios de sitios web invierten significativamente en la compra de fotografías de excelente calibre para usarlas como contenido. Por lo general, se sienten desperdiciados cuando las personas los obtienen de forma gratuita y los utilizan en sus sitios web; por lo tanto, deshabilitan el clic derecho para proteger las fotografías.
Para proteger el código fuente
Los desarrolladores hacen un gran esfuerzo para crear sitios web únicos e innovadores. Escribir código HTML, CSS y JavaScript para un sitio web visualmente atractivo y funcional requiere mucho tiempo y esfuerzo.
Algunos diseñadores web roban el código fuente de los sitios web de otras personas, hacen algunas modificaciones y luego publican los resultados como propios. Por lo tanto, los desarrolladores creen que deshabilitar la visualización de la fuente de la página en su sitio web es una excelente estrategia para proteger el código fuente de su sitio web.
Para cumplir con los requisitos del usuario
A veces, deshabilitar el clic derecho es un requisito de la aplicación web. Depende del público al que se dirija la aplicación.
Por ejemplo, un sistema hospitalario está hecho para pacientes que no tienen mucho conocimiento tecnológico y terminan haciendo clic en opciones no deseadas. Entonces, para mantener el diseño simple para ellos, todos los clics innecesarios están configurados para deshabilitarse.
Por qué deshabilitar el clic derecho no es una buena idea
Hemos discutido las necesidades en las que piensan los desarrolladores para deshabilitar el clic derecho en sus sitios web, pero dijimos que no es un enfoque eficiente. Discutamos por qué.
Molesto para el usuario
Deshabilitar el clic derecho no hace más que enojar a los usuarios de su sitio web. Simplemente hace que el uso de su sitio web sea más complejo y menos fácil de usar.
El menú contextual ofrece muchas opciones útiles para el usuario. El navegador web Chrome ofrece la opción de Traducción a los usuarios, traduciendo el sitio web al idioma seleccionado por el usuario.
Otra característica esencial en el menú contextual de Chrome es compartir el enlace entre sus dispositivos, lo que permite a los usuarios enviar directamente cualquier enlace desde su PC a su teléfono y viceversa.
Sin impacto en la seguridad
Deshabilitar el clic derecho no es seguridad. No tiene otro efecto que hacer que sea más fácil guardar elementos fuera de una página.
Usar el modo de desarrollador en un navegador o deshabilitar JavaScript funcionará. Podemos acceder al código fuente a través de la tecla de atajo Ctrl+U e inspeccionar usando Ctrl+Shift+Yo.
Si los desarrolladores deshabilitan el clic derecho para que su sitio web sea más seguro, van en la dirección equivocada. El menú del botón derecho está deshabilitado usando JavaScript, y podemos deshabilitar fácilmente la funcionalidad de JavaScript en los navegadores.
no tiene sentido
Piense de nuevo si cree que deshabilitar el clic derecho protegerá su código fuente o sus fotos. Cualquiera que esté decidido a robar su contenido o código lo hará independientemente de su capacidad para acceder al menú contextual del navegador.
Como discutimos, estos menús contextuales brindan funciones convenientes para los usuarios y, al deshabilitarlos, solo está restringiendo a sus usuarios el uso de funciones valiosas.
Muchas personas ahora leen en línea y, a veces, hay un enlace en el sitio web que desean abrir en una nueva pestaña. Ahora, los navegadores brindan esta función en el menú contextual y los usuarios se molestarán si los menús están deshabilitados.
Sin embargo, hay una tecla de método abreviado para esto. Si hacemos clic en el enlace mientras mantenemos presionada la tecla Ctrl, nos llevará a la nueva pestaña, y si hacemos clic en el enlace mientras mantenemos presionada la tecla Shift, lo hará llévanos a la nueva ventana.
Pero existe una posibilidad considerable de que los usuarios no sepan esto, y será una molestia para ellos.
Capta la atención no deseada
Deshabilitar el clic derecho hace que algunas personas estén más decididas a descubrir lo que estás ocultando. Y esto podría ser contraproducente al atraer atención no deseada a sus imágenes y código fuente.
Además, solo puede deshabilitar el clic derecho en los navegadores que tienen habilitado JavaScript. Los visitantes pueden ignorar por completo el script desactivando JavaScript en la configuración de su navegador.
Deshabilite el clic derecho usando el controlador de eventos HTML
Hasta ahora, hemos discutido las razones por las que un desarrollador piensa para deshabilitar el menú contextual del botón derecho en sus sitios web y algunas razones por las que no deberíamos hacer esto. Ahora, analicemos algunos métodos para deshabilitar el clic derecho.
Podemos deshabilitar fácilmente el menú contextual del botón derecho en nuestro sitio web usando el oncontextmenu en nuestros elementos HTML. Cuando alguien hace clic derecho en un elemento HTML para mostrar el menú contextual, se activa el evento oncontextmenu.
Verifique el código a continuación para entender esto.
<html>
<body oncontextmenu="return false">
<p>
You cannot right-click here.
</p>
</body>
</html>
Establecemos oncontextmenu como igual a falso. Esto significa que cuando el usuario hace clic derecho para abrir el menú contextual en cualquier sitio web, devolverá falso y el menú no se abrirá.
Es posible que haya notado que colocamos oncontextmenu en la etiqueta “cuerpo”, lo que significa que al hacer clic con el botón derecho en el cuerpo del HTML no se activará el menú contextual. No es necesario deshabilitar el clic derecho en toda la página.
Si su único propósito para deshabilitar el menú es proteger sus imágenes, simplemente puede poner el oncontextmenu en la etiqueta imagen.
Deshabilitar el clic derecho usando JavaScript
También podemos usar JavaScript para lograr el mismo objetivo. Consulte el código a continuación para ver cómo podemos usar JavaScript para lograr la funcionalidad deseada.
<html>
<head>
<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
</head>
<body>
You cannot right-click here.
</body>
</html>
La función addEventListener() añade un controlador de eventos al elemento especificado. El primer parámetro es el tipo de evento (como cualquier evento HTML DOM), y el segundo parámetro especifica la función que se llamará cuando ocurra el evento.
Si el evento es cancelable, el método preventDefault() detendrá la acción predeterminada del evento.
Deshabilitar clic derecho en las imágenes
En este método, nos centraremos únicamente en proteger las imágenes de nuestro sitio web. Como discutimos anteriormente, deshabilitar el clic derecho en toda la página no deja una buena impresión en los usuarios.
Podemos hacerlo fácilmente con la ayuda de JavaScript. Podemos apuntar solo a la etiqueta de imagen de HTML en lugar de a todo el cuerpo de una página HTML.
Verifique el código a continuación para entender cómo.
<html>
<head>
<script>
document.addEventListener("contextmenu", function(e){
if (e.target.nodeName === "IMG") {
e.preventDefault();
}
}, false);
</script>
</head>
<body>
<img src="/img/DelftStack/logo.png"/>
</body>
</html>
Echemos un vistazo en profundidad al código.
Creemos que comprende la función addEventListener() de JavaScript en este momento. Ya hemos revisado los parámetros de la función, así que veamos el segundo, que representa una función que se activará cuando ocurra el evento especificado en el primer parámetro.
Cuando ocurre un evento, el elemento que causa el evento se denomina emisor, se denomina objetivo o, simplemente, el objetivo devuelve el elemento DOM que desencadenó un evento específico. La función nodeName devuelve el nombre de nodo del elemento.
En conclusión, e.target.nodeName devuelve el nombre del elemento sobre el que el usuario hace clic con el botón derecho. En el código, validamos que si el nombre del elemento en el que se hizo clic es IMG, no debería realizar el evento especificado en el primer parámetro.