- Level: Intermediate
- Skills Required: Basics of JavaScript and Event Handling
Abstract:
JavaScript has one significant advantage over VBScript and that is JavaScript runs on both browsers: Netscape Navigator as well as IE. However, this is only partially true. As you move on to advance features they both implement them in quite different manners. This is a very serious problem that makes you take sides in the browser war.
The feature that we are going to use today is one such example. Disabling right click (or left click for that matter) is based on event model. As you already know - I assume that - JavaScript applications are largely event-driven. Events are actions that occur perhaps because the user interacts with your application. Your script can respond to those events by being called on onClick, onSubmit, etc.
Event Handling - The Modern Way:
Event handling changed significantly with Netscape Navigator 4.0. The new features that were added in JavaScript 1.2 were
- new events like DragDrop and MouseDown
- the event object that is passed as an argument to your event handlers. This object contains details about the event.
- window and document level event capturing. Now you can handle an event even before the text box or button gets it.
Internet Explorer 4.0 uses JScript. The basic techniques of event capturing are almost same but the implementation is somewhat different. We will discuss the details of event capturing and handling in some other article. Today, this basic introduction is enough.
The Code:
The code that disables right click is as follows. Most of the stuff is self explanatory. However, I explain a few things in the next section:
<html>
<head>
<script language="JavaScript">
var eventCounter = 0;
var msg = "Right Click Is Disabled. You have clicked ";
if(document.layers) window.captureEvents (Event.MOUSEDOWN);
function captureRightClick(e)
{
++eventCounter;
if (navigator.appName == 'Netscape' && ( e.which == 2 || e.which == 3))
alert(msg + eventCounter + " times.");
if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3))
{
alert(msg + eventCounter+ " times.");
event.returnValue=false;
}
return false;
}
window.onmousedown=captureRightClick;
</script>
</head>
<body>
<center>This page has right clicks disabled.</center>
</body>
</html>
Explanation:
This code starts with definition of two global variables and then checks whether document supports layers. This is true for Netscape Navigator 4.0 and above. Thus, we tell the browser that we are going to capture all mouse down events by ourselves by calling the function window.captureEvents().
Next we define the function captureRightClick(). You can use a different name. It checks whether the browser is IE or Netscape Navigator. For both a message is displayed that right click is disabled. However, the
Go To Page: 1 2
| Here's the follow-up discussion on this article: | View all related messages |
For a complete listing of article comments, questions, and other discussions related to Muhammad Ali Shah's JavaScript topic, please visit the Discussions page.