Clicking on the right mouse button can be disabled using JavaScript. It is also possible to be more selective, blocking the right click on specific items.
The simplest method to disable the mouse right click on a website is through the use of a JavaScript function, acting on the document context:
<script type="text/javascript">
document.oncontextmenu = disableRightClick;
function disableRightClick()
{
return false;
}
</script>
To be fashionable here’s a jQuery option:
<script type="text/javascript">
$(document).ready(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
or a class could be used making it more selective.
<script type="text/javascript">
$(document).ready(function() {
$('.NoRightClick').bind('contextmenu', function(e) {
return false;
});
});
</script>
Perhaps add a message rather than simply blocking the action:
<script type="text/javascript">
$(document).ready(function() {
$('.NoRightClick').bind('contextmenu', function(e) {
alert('please respect the copyright of the images used on this website');
return false;
});
});
</script>
<img src="35x32Gallery1Thumbnails5.jpg" />
<img src="35x32Gallery1Thumbnails5.jpg" />
For the jQuery code to work a reference to the jQuery libraries and an appropriate DocType for the web page are required, for example:
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script>
and
<!DOCTYPE html>
Whilst the right mouse click and its menu options can be disabled, the following should be considered:
- Visitors may not like the blocking of the right click, for legitimate reasons like opening a link in a new tab
- blocking the right mouse click, for example to stop image saves, will not work if the visitor is using NoScript.
- Viewing the page source will enable the reference to be found.
An alternative is to set the image as the background to a div, with a transparent image over the top. however, the image will still have a reference and so can be downloaded directly.
