July 31, 2000 - Limitations of Event Capturing | WebReference

July 31, 2000 - Limitations of Event Capturing

Yehuda Shiran July 31, 2000
Limitations of Event Capturing
Tips: July 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

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>