Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

Man-Handling Events #2

Man-Handling Events #1

Events and Event Handlers

Man-Handling Events #3

You are here: irt.org | Articles | JavaScript | Events | Man-Handling Events #3 [ previous next ]

Published on: Sunday 12th December 1999 By: Ryan Detert

Man-Handling Events #2 - Grabbing The Mouse By The Tail

A Special Note On Netscape Mouse Events

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.

onclick

Internet Explorer:

Fires when the user clicks the left mouse button on the object. To invoke the click event you may do either of the following:

Netscape Naviator:

Fires when the user clicks a form object or document.

ondblclick

Internet Explorer:

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.

Netscape Navigator:

Fires when the user double-clicks a form element, link, or document.

onmousedown

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.

onmouseup

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>

View Internet Explorer Demo

onmousemove

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>

View Explorer Example

onmouseover

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.

onmouseout

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.

Reading Each Mouse Button Separately

Internet Explorer:

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

Netscape Navigator:

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.

Working Examples

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

Related items

Man-Handling Events #2

Man-Handling Events #1

Events and Event Handlers

©2018 Martin Webb