Cómo Deshabilitar el Clic Derecho en Imágenes Usando jQuery
En una de mis publicaciones anteriores, ya discutimos cómo Deshabilitar CTRL+U, CTRL+C y hacer clic derecho en una página web, y el tutorial de hoy trata sobre cómo deshabilitar el clic derecho y arrastrar imágenes usando jQuery en cualquier página web.
A menudo recibo solicitudes de mis amigos y clientes blogueros para proteger las fotos en sus sitios y evitar que las personas las descarguen o guarden. La mayoría de ellos quieren que actualice el sitio para evitar que los usuarios hagan clic derecho en la imagen y guarden la imagen o la arrastren a su computadora o aplicación como Photoshop.
Está bien, pero ¿por qué debe desactivar el clic derecho y arrastrar imágenes en su blog o sitio web?
No hay ninguna razón en particular para que hagas esto. Personalmente, no recomiendo usar este script para deshabilitar las imágenes con el botón derecho del ratón porque disminuye la calidad de la experiencia del usuario. Además, sería muy molesto para muchos usuarios. Recuerde que el propósito principal de su sitio web es proporcionar valor a sus usuarios.
Incluso si está familiarizado con un poco de selectores jQuery y CSS, puede editar el script para deshabilitar o habilitar el clic derecho y arrastrar sobre cualquier tipo de elemento HTML. Puede desactivar el clic derecho en imágenes con una clase especial de un componente en particular.
¿Cómo agregar el script?
Si desea agregar este script a su blog, aquí hay un script que puede usar para deshabilitar el clic derecho en arrastrar imágenes. Este script funciona basado en jQuery,pero la condición es que tu blog tenga instalado un plugin de jQuery. Si no es así, agregue el siguiente complemento de jQuery encima de la etiqueta </head> en su blog o sitio web.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>Ahora, es el momento de agregar el script jQuery que deshabilitará el clic derecho y el arrastre de imágenes en el sitio web de su blog. Todo lo que tienes que hacer es agregar el siguiente script encima de la etiqueta </body> en el HTML de tu blog/sitio web.
<script type="text/javascript">$(document).ready(function(){// this part disables the right click$('img').on('contextmenu', function(e) {return false;});//this part disables dragging of image$('img').on('dragstart', function(e) {return false;});});</script>Eso es todo. Ahora visite su sitio web e intente hacer clic con el botón derecho en cualquier imagen y vea cómo funciona este script.
¿Hay otra forma de hacerlo?
Además, aquí hay otra forma que puede usar para deshabilitar el clic derecho en la imagen usando Javascript (Sí, Javascript. No jQuery). Si no desea agregar el script jQuery anterior a su blog o desea que solo se deshabilite el clic derecho y no se arrastre, hay otra manera.
Sin embargo, también puede eliminar la función de desactivación de arrastre del script anterior, pero simplemente puede usar el código Javascript que se muestra a continuación que debe pegar antes de la etiqueta </head> en el HTML de su blog o sitio web.
<script type='text/javascript'>//<!]></script>Recomendado para usted:
Cómo deshabilitar la selección de texto en una página web mediante CSS