Los métodos de JavaScript se utilizan para deshabilitar el clic derecho en la página. Los métodos utilizados se enumeran a continuación:
- Método HTML DOM addEventListener() : este método adjunta un controlador de eventos al documento.
Sintaxis:
document.addEventListener(event, function, useCapture)
Parámetros:
- evento: Es un parámetro requerido. Especifica la string que es el nombre del evento.
- función: Es un parámetro requerido. Especifica la función que se ejecutará cuando ocurra el evento. Cuando ocurre el evento, se pasa un objeto de evento como primer parámetro a la función. El tipo del objeto de evento depende del evento definido. Por ejemplo, el evento «clic» es del objeto MouseEvent.
- useCapture: Es un parámetro opcional. Especifica el valor booleano de si el evento debe ejecutarse en la fase de captura o burbujeo.
- true: Especifica que el evento debe ejecutarse en la fase de captura.
- falso: especifica que el evento debe ejecutarse en la fase de burbujeo.
- Método de evento preventDefault() Este método cancela el evento si se puede cancelar, lo que significa que detiene la acción predeterminada que pertenece al evento. Por ejemplo, al hacer clic en el botón «Enviar», evita que envíe un formulario.
Sintaxis:
event.preventDefault()
Parámetros: No acepta ningún parámetro.
Ejemplo 1: este ejemplo deshabilita el clic derecho agregando un detector de eventos para el evento «contextmenu» y llamando al método preventDefault() .
<!DOCTYPE HTML>
<html>
<head>
<title>
Disable right click on my web page
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style = "font-size: 16px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Disable
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to disable right click";
function gfg_Run() {
document.addEventListener('contextmenu',
event => event.preventDefault());
el_down.innerHTML = "Right click disabled";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo deshabilita el clic derecho en la imagen agregando un detector de eventos para el evento «contextmenu» y llamando al método preventDefault() . Porque, a veces, no queremos que el usuario guarde la imagen.
<!DOCTYPE HTML>
<html>
<head>
<title>
Disable right click on my web page
</title>
<style>
img {
border: 1px solid;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/20190521140445/gfglogo2.png"/>
<p id = "GFG_UP" style = "font-size: 16px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Disable
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML =
"Click on the button to disable right click on image";
function gfg_Run() {
document.addEventListener("contextmenu",
function(e) {
if (e.target.nodeName === "IMG") {
e.preventDefault();
}
}, false);
el_down.innerHTML = "Right click disabled on image";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA