Disabling right click on images using jquery - javascript

I want to know how to disable right click on images using jQuery.
I know only this:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(document).bind("contextmenu",function(e) {
return false;
});
});
</script>

This works:
$('img').bind('contextmenu', function(e) {
return false;
});
Or for newer jQuery:
$('#nearestStaticContainer').on('contextmenu', 'img', function(e){
return false;
});
jsFiddle example

what is your purpose of disabling the right click. problem with any technique is that there is always a way to go around them. the console for firefox (firebug) and chrome allow for unbinding of that event. or if you want the image to be protected one could always just take a look at their temporary cache for the images.
If you want to create your own contextual menu the preventDefault is fine. Just pick your battles here. not even a big JavaScript library like tnyMCE works on all browsers... and that is not because it's not possible ;-).
$(document).bind("contextmenu",function(e){
e.preventDefault()
});
Personally I'm more in for an open internet. Native browser behavior should not be hindered by the pages interactions. I am sure that other ways can be found to interact that are not the right click.

For Disable Right Click Option
<script type="text/javascript">
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>

In chrome and firefox the methods above didn't work unless I used 'live' instead of 'bind'.
This worked for me:
$('img').live('contextmenu', function(e){
return false;
});

For modern browsers all you need is this CSS:
img {
pointer-events: none;
}
Older browsers will still allow pointer events on the images, but the CSS above will take care of the vast majority of visitors to your site, and used in conjunction with the contextmenu methods should give you a very solid solution.

The better way of doing this without jQuery:
const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
images[i].addEventListener('contextmenu', event => event.preventDefault());
}

Would it be possible to leave the ability to right click and download just when done a separate watermark is placed on the image. Of course this won't prevent screen shots but thought it may be a good middle ground.

You could try this :
var message="Sorry, right-click has been disabled";
function clickIE() {
if (document.all) {
(message);
return false;
}
}
function clickNS(e) {
if (document.layers || (document.getElementById && !document.all)) {
if (e.which == 2||e.which == 3) {
(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}
document.oncontextmenu = new Function("return false")
Checkout a demo here

A very simple way is to add the image as a background to a DIV then load an empty transparent gif set to the same size as the DIV in the foreground. that keeps the less determined out. They cant get the background without viewing the code and copying the URL and right clicking just downloads the transparent gif.

This should work
$(function(){
$('body').on('contextmenu', 'img', function(e){
return false;
});
});

Related

JavaScript, Print Screen and copy and paste

I got some code from the internet, below, and used it in a mock exam application I am doing. This is suppose to prevent people from Printing Screen, copying or cutting from the exam page. The code works perfectly well in Internet Explorer but does not work in the other browsers. I need help to make the code below work in the other browsers to avoid cheating at the site during mock exam. Below is the code:
<script type="text/javascript">
function AccessClipboardData() {
try {
window.clipboardData.setData('text', "No print data");
} catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.description + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
}
setInterval("AccessClipboardData()", 300);
document.onkeydown = function (ev) {
var a;
ev = window.event;
if (typeof ev == "undefined") {
alert("PLEASE DON'T USE KEYBORD");
}
a = ev.keyCode;
alert("PLEASE DON'T USE KEYBORD");
return false;
}
document.onkeyup = function (ev) {
var charCode;
if (typeof ev == "undefined") {
ev = window.event;
alert("PLEASE DON'T USE KEYBORD");
} else {
alert("PLEASE DON'T USE KEYBORD");
}
return false;
}
Please know that it is entirely impossible to prevent users from copying or screencapping your site from javascript, seeing how they could simply disable js or your function in particular as has been mentioned in the comments already.
If you simply want to discourage people as much as possible you can still use your code, however window.clipboardData.setData only works in IE so it is not strange you would get an error message in other browsers, for thos you would have to use execCommand to copy a set message to the clipboard at you set interval
documnet.execCommand(delete, false, null)
to delete the current selection and then
documnet.execCommand(copy, false, null)
to copy the currently selected text(which you just made sure was nothing)
(for more info on execCommand https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)
this should work in Firefox, Safari and Chrome, I know of no way to do this in Opera, as neither command will work in that browser
Note however that this will keep overwritting your clipboard as long as the site is open in the browser, so even if someone tried to copy something else entirely they would be unable.
I would like to point out that I provide this function only to show you what the problem with your code, as you will never be able to do what you want to completely without getting people to install third party rights management software on their computer.
I find the following code at Stackoverflow here, by iDhavalVaja and it worked fine.
<script type="text/javascript">
$(function () {
$(this).bind("contextmenu", function (e) {
e.preventDefault();
});
});
</script>
<script type="text/JavaScript">
function killCopy(e) { return false }
function reEnable() { return true }
document.onselectstart = new Function("return false");
if (window.sidebar) {
document.onmousedown = killCopy;
document.onclick = reEnable;
}
</script>
If you just want to get this working in other browsers, maybe use jQuery (something like this):
$(document).keydown(function (e) {
alert("PLEASE DON'T USE KEYBORD");
});

CSS scrolling issue in mobile phone

I have been trying to solve this weird problem with scrolling in my website. The scrolling works fine when viewed on a Desktop Computer. However, it doesn't work in mobile phones. Do, I need to use some javascript to solve this issue?Or, can it be done just with CSS.
Here is my CSS snippet :
#popup-div{
height: 100%;
overflow:scroll;
}
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
//On page load
touchScroll('popup-div');
Chris has shown a best working example
http://chrismbarr.github.io/TouchScroll/

Why Internet Explorer stop after a function when use event.preventDefault() or return false

I have a little code like this:
$("input#checkbox").change(changeCheckbox);
function changeCheckbox() {
var inputCheck = $("input#checkbox"),
button = $("input#button");
if (inputCheck.is(":checked")) {
button.hide();
} else {
button.show();
}
}
This work perfect in all modern Browser and IE 8
But when I use this one with event.preventDefault();:
$("input#checkbox").change(changeCheckbox);
function changeCheckbox(event) {
event.preventDefault(); // <-- Here
var inputCheck = $("input#checkbox"),
button = $("input#button");
if (inputCheck.is(":checked")) {
button.hide();
} else {
button.show();
}
}
or I set return false;
$("input#checkbox").change(changeCheckbox);
function changeCheckbox() {
var inputCheck = $("input#checkbox"),
button = $("input#button");
if (inputCheck.is(":checked")) {
button.hide();
} else {
button.show();
}
return false; // <-- Here
}
then the function only works once and I can do nothing more with this in (only) Internet Explorer 8
Can someone explain to me why this happens?
And i have a lot of other functions and use similar codes with event.preventDefault(); and return false; at the end and there are OK...
I use this jQuery Version: jquery_1.10.1.min.js
Thanks in advance!
Can someone explain to me why this happens?
It's a bug in Internet Explorer (what else). The change event is supposed to be not cancelable, in contrast to click events (see Is event.preventDefault cancelling change events?, jQuery/Javascript: Click event on a checkbox and the 'checked' attribute and Why does preventDefault() on a parent element's click 'disable' a checkbox?). IE8 however does prevent the checkbox from being (un)checked when the change event is canceled. Try it here.
How to work around that? Just remove e.preventDefault() (or return false) from your code. I don't see any reason to use it anyway.
What you want to achieve is to show/hide #button based on the value of #checkbox. You can do it this way. Very less lines of code as compared to your code
$('#checkbox').on('change', function() {
$('#button').toggle(this.checked);
});
FIDDLE
You can add this code for IE8:
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
Since you are using jQuery you can use the built-in cross-browser event fix:
event = $.event.fix(event);
See: http://www.jquerysdk.com/api/jQuery.event.fix

How to determine which control in window.onbeforeunload in javascript caused the event

I have set up in javascript:
var onBeforeUnloadFired = false;
window.onbeforeunload = function (sender, args)
{
if(window.event){
if(!onBeforeUnloadFired) {
onBeforeUnloadFired = true;
window.event.returnValue = 'You will lose any unsaved changes!'; //IE
}
}
else {
return 'You will lose any unsaved changes!'; //FX
}
windows.setTimeout("ResetOnBeforeUnloadFired()", 1000);
}
function ResetOnBeforeUnloadFired() {
//Need this variable to prevent IE firing twice.
onBeforeUnloadFired = false;
}
I'm trying to achieve an edit screen where the user is warned before navigating away. It works fine except I get the pop up for normal post backs of button clicks. I'm hoping to avoid this so I'm figuring if I could determine which button was pressed it would work.
Does anybody know how to determine which button was pressed in the windows.onbeforeunload?
Alternatively anyone know a better approach to what I'm trying to achieve?
Solved this by putting into an update panel all edit items TextBoxes etc.
Now the windows.onbeforeunload only fires for components external to this.
Another method, if you can't "control" that deep you controls, is to mark somewhat the "good controls", that is the ones which should not trigger the away-navigation logic.
That is easily achievable setting a global javascript variable such as
var isGoodLink=false;
window.onbeforeunload = function (e) {
var message = "Whatever";
e = e || window.event;
if (!isGoodLink) {
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
}
};
function setGoodLink() {
isGoodLink=true;
}
And add the setGoodLink function on the events you want to keep safe:
<button type="button" onclick="javascript:setGoodLink() ">I am a good button!</button>

highlighting disabled in browser

I have a simple pagination script.
When you click the "next" button multiple times in a short period of time, the browser highlights the clickable area. All browsers do this to an element that you click repeatedly.
Is there a way to disable the highlighting of that element?
I feel like I've looked everwhere and cannot find an answer.
Thank You!
Very difficult to do this cross-browser. I usually just assume that IE users are used to stuff looking a little off/wont notice the highlight/etc. I use this snippet which uses jQuery but should be adaptable to pretty much any library:
$.fn.disableSelection = function() {
return $(this).each( function( index, el ) {
if( typeof el.style.MozUserSelect != 'undefined' ) {
el.style.MozUserSelect = 'none';
}
else {
el.onmousedown = function() { return false; }
}
el.style.cursor = 'pointer';
} );
}

Categories

Resources