We found out that the setCapture() method is limited in the set of operations that you can invoke in its event handling. In this example we capture the onmousemove event and then update two text fields that reflect the x and y coordinates of the mouse:
<DIV ID="oCaptureDemo" STYLE="border:solid black 1px; background-color:tan;
padding:5px; width:350" onmousemove="mouseX.value=event.x; mouseY.value=event.y;">
Try to change the event handler to the following:
<DIV ID="oCaptureDemo" STYLE="border:solid black 1px; background-color:tan;
padding:5px; width:350" onmousemove="alert('mouse movement detected')">
The alert box won't pop up as you would expect. It appears only when the mouse movement occurs within the DIV boundary itself. Seems like you cannot do everything inside the event handler, alert() is one of them. Here is the listings of the example above:
<HTML>
<HEAD>
<SCRIPT>
<!--
var capture = true;
function fnSwitchCapture() {
if (capture) {
capture = false;
document.releaseCapture();
}
else {
capture = true;
oCaptureDemo.setCapture();
}
}
// -->
</SCRIPT>
</HEAD>
<BODY onload="oCaptureDemo.setCapture()" onclick=fnSwitchCapture()>
<H1>Sample of Mouse Capture</H1>
<DIV ID="oCaptureDemo" STYLE="border:solid black 1px; background-color:tan;
padding:5px; width:350" onmousemove="mouseX.value=event.x; mouseY.value=event.y;">
<P>Mouse capture has been set to this tan division (<B>DIV</B>) at load time
using the <B>setCapture</B> method. Move the mouse around and see how the text
fields below will track the <B>mousemove</B> event through the <B>x</B>
and <B>y</B> properties of the event object. Click anywhere to release the
capture or to restore it.</P>
<FIELDSET STYLE="width:110; padding:5px;">
<LEGEND>Mouse Coordinates</LEGEND>
<LABEL FOR="mouseX">x</LABEL>
<INPUT TYPE="text" ID="mouseX" STYLE="width:35">
<LABEL FOR="mouseY">y</LABEL>
<INPUT TYPE="text" ID="mouseY" STYLE="width:35">
</FIELDSET>
</DIV>
</BODY>
</HTML>
People who read this tip also read these tips:
Look for similar tips by subject:
| 
