DHTML Methods
Sets the mouse capture to the object belonging to the current document.
object.setCapture ( [ bContainerCapture ] )
| bContainerCapture |
Optional. Boolean value of true is the default. By default, the element having mouse capture will fire all events, irrespective of where they originate in the document. |
No return value.
Once mouse capture is set to an object, that object fires all mouse events for the document. Supported mouse events include onmousedown, onmouseup, onmousemove, onclick, and ondblclick, onmouseover, and onmouseout. However, the srcElement property of the window event object always returns the object that is positioned under the mouse rather than the object that has mouse capture.
When a container object, such as a DIV, has mouse capture, events originating on objects within that container are fired by the DIV, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container no longer to capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.
Drag-and-drop as well as text selection through the user interface are disabled when mouse capture is set programmatically.
Key events, onkeydown, onkeyup, and onkeypress, are unaffected by mouse capture and fire as usual.
The following examples show different aspects of mouse capture. The first example demonstrates how to use the setCapture method to track the origin of events.
Show me
This second example illustrates the difference between detecting events using mouse capture and event bubbling.
<body onload="theDiv.setCapture ( )"
onclick="document.releaseCapture ( )">
<div align="center">
X <input id="txtX" size=4> Y <input id="txtY" size=4>
<div id="theDiv"
onmousemove="txtX.value=event.clientX;
txtY.value=event.clientY";
onlosecapture="alert (
'Mouse capture for the BODY is over.' )">
<p>Mouse capture has been set to this division
. . . </p>
<input size=25 value="Move mouse over this object.">
<input type=button value="Click Anywhere to End
Mouse Capture">
</div>
Show me
Finally, this third example puts it all together. This sample shows how mouse capture can animate graphics, in response to user input.
Show me
onlosecapture, releaseCapture