You are here: irt.org | Articles | JavaScript | Events | Man-Handling Events #3 [ previous next ]
Published on: Sunday 12th December 1999 By: Ryan Detert
To capture mouse clicks you must use the special window.captureEvents() or document.captureEvents() method. When using this method, you need to pass at least one Event argument to the captureEvents() function.
For instance, to capture all clicks in a window go use:
window.captureEvents(Event.CLICK);
Notice that the name of the event is all capital letters. To add other events you simply separate them all with a bit-wise OR ( | ) operator, which is a horizontal slash. For example:
window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP);
After this is complete, you must then assign the event handlers associated with the events specified by the captureEvents() by doing something like:
document.onClick = myHandlerFunction;
All information dealing with the CLICK event will then be passed as an argument to the myHandlerFunction that the user has created.
Fires when the user clicks the left mouse button on the object. To invoke the click event you may do either of the following:
Fires when the user clicks a form object or document.
Fires when the user double-clicks an object. One thing to note here is that the order of events leading to the ondblclick event is onmousedown, onmouseup, onclick, onmouseup, and then ondblclick. Actions associated with any of the previous events are executed when the ondblclick event fires.
Fires when the user double-clicks a form element, link, or document.
Fires when the user depresses a button over the object with either mouse button. In Netscape the only objects handled by the mousedown event are buttons, links, and documents.
Fires when the user releases a mouse button while the mouse is over the target object. In Netscape the only objects handled by the mouseup event are buttons, links, and documents.
The following code demonstrates some of the mouse events in Internet Explorer:
<html>
<head><title>ondblclick</title>
<script language="JavaScript"><!--
var x=0;
function handleMe(which) {
document.forms[0].elements[0].value += which + " fired... Then ";
}
//--></script>
</head>
<body>
<h2>Example For Explorer Click Events.</h2>
<p>
<div onclick="handleMe(event.type)"
onmousedown="handleMe(event.type)"
onmouseup="handleMe(event.type)"
ondblclick="handleMe(event.type)"
style="color: blue; font-family: arial; cursor: hand">
Click This Text Any Way You See Fit.
</div>
</p>
<form>
<table>
<tr><td valign="top">
Event Being Handled:
<textarea rows="4" cols="60"></textarea>
</td></tr>
<tr><td valign="top">
<input type="Reset">
</td></tr>
</table>
</form>
</body>
</html>
Fires when the user moves the mouse cursor. In Netscape I could only get it to work with the document object.
The following code demonstrates how to capture the mouse moving in Netscape Navigator:
<html>
<head>
<script language="JavaScript"><!--
function coords(eventType) {
with (document.forms[0]) {
elements[0].value = eventType.layerX;
elements[1].value = eventType.layerY;
elements[2].value = eventType.pageX;
elements[3].value = eventType.pageY;
elements[4].value = eventType.screenX;
elements[5].value = eventType.screenY;
}
}
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove = coords;
//--></script>
</head>
<body>
<h2>Netscape Mouse Coordinate Demo</h2>
<p>
Move the mouse within the document below:
</p>
<form>
<table>
<tr>
<td><b>layerX = </b> <input type="text"></td>
<td><b>layerY = </b> <input type="text"></td>
</tr>
<tr>
<td><b>pageX = </b> <input type="text"></td>
<td><b>pageY = </b> <input type="text"></td>
</tr>
<tr>
<td><b>screenX = </b> <input type="text"></td>
<td><b>screenY = </b> <input type="text"></td>
</tr>
</table>
</form>
</body>
</html>
View Netscape Navigator Example
The following code demonstrates how to catch the mouse moving in Internet Explorer:
<html>
<head>
<script language="JavaScript"><!--
function coords(){
document.all.box.innerHTML =
"<b>clientX<\/b> = " + event.clientX + " " +
"<b>clientY<\/b> = " + event.clientY + " " +
"<p><B>offsetX<\/b> = " + event.offsetX + " " +
"<b>offsetY<\/b> = " + event.offsetY + " " +
"<p><b>screenX<\/b> = " + event.screenX + " " +
"<b>screenY<\/b> = " + event.screenY + " " +
"<p><b>x<\/b> = " + event.x + " " +
"<b>y<\/b> = " + event.y;
}
//--></script>
</head>
<style type="text/css"><!--
div.box {
background: white;
border-bottom: black 1px solid;
border-left: black 1px solid;
border-right: black 1px solid;
border-top: black 1px solid;
height: 200px;
position: relative;
width: 300px"
}
//--></style>
<body>
<h2>IE Mouse Coordinate Demo</h2>
<p>
Move the mouse within the box below:
</p>
<div id=box
onmousemove="coords()">
</div>
</body>
</html>
Fires when the mouse cursor hovers over an object. In Netscape the only objects handled are layers, links, and areas with a defined href attribute.
Fires when the mouse cursor hovers off an object. In Netscape the only objects handled are layers, links, and areas with a pre-defined href attribute.
When onmousedown, onmouseup, and onmousemove are used, the actual button pressed can be determined using the button event object property. Here is a list of return values and their associated button configurations for all mouse clicks in Explorer. Syntax: window.event.button
In Netscape you use the which event object property by going userObject.which. This will return a 0 for no buttons being pressed, a 1 for a left button click, and a 3 for a right button click.
Finally, I have included two simple working examples to demonstrate a tool tip over a heading for both Internet Explorer 4 and Netscape Navigator 4