Good afternoon,
I have a problem when running some events when the magnific-popup plugin has an open image. I put you in a little situation:
Goal
What I need is to put obstacles to capture the images of a website. I am fully aware of the impossibility of doing this 100%, but I still want to put certain impediments for the most basic users. Leaving aside the rest of the ways that exist to steal an image, the implementation that I want to make consists of:
- Avoid clicking right in images (I have it).
- Avoid capturing screen (Here I have the problem partially).
Problem
Currently I have the developed code, the only problem comes when you have to execute the trigger at the same time that the photo is enlarged with magnific-popup.
This is the JS code that I have:
function fakeCopy(){
var aux = document.createElement("input");
aux.setAttribute("value", "Lo sentimos, no esta permitido tomar capturas de pantalla de este sitio web.");
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
window.addEventListener('contextmenu', function(ev) {
if(ev.target.tagName == 'IMG'){
ev.preventDefault();
console.log('Ejecuto');
return false;
}
});
window.addEventListener("keyup", function(e){
if(e.keyCode == 44){
console.log('Ejecuto');
fakeCopy();
}
});
This portion of code corresponds to the two events that I execute (one to avoid right click and another to avoid pressing that key). The rest of the code I understand is indifferent, however you tell me if you need any more portion.
Playback
When events are executed without magnific-popup being open, both work correctly.
When running events with magnific-popup open, only the right-click event works, the key-capture event does not work. Here is a little doubt that I have, if the right click event is correctly captured and executed, why the other does not?.
CodePen: link
Many thanks in advance, greetings.