setCapture Method (A, ADDRESS, APPLET, ...)

setCapture Method

Sets the mouse capture to the object that belongs to the current document.

Syntax

object.setCapture( [bContainerCapture])

Parameters

bContainerCapture Optional. A Boolean that specifies one of the following values.
true Default. Events originating in a container are captured by the container.
false Events originating in a container are not captured by the container.

Return Value

No return value.

Remarks

After mouse capture is set to an object, all mouse events for the document are routed to that object. Supported mouse events include onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, and onmouseout. The srcElement property of the window event object always returns the object that is positioned under the mouse, instead of the object that has mouse capture.
Mouse clicks automatically trigger the onlosecapture event. To retain mouse capture, call setCapture inside the onclick event handler. Mouse capture is also lost if the browser window loses focus for any reason (including alerts or pop-up windows).
When the bContainerCapture parameter is set to true, a container object, such as a div, captures mouse events for all objects in it. By passing the value false, objects in that container can fire events, and cancel event bubbling.
Note The bContainerCapture parameter is available only in Microsoft Internet Explorer 5.5 or later. For earlier versions, do not specify a parameter.
Drag-and-drop operations, such as the ondragstart event, and text selection through the user interface are disabled when mouse capture is set programmatically. The following key events are unaffected by mouse capture and fire as usual: onkeydown, onkeyup, and onkeypress.

Examples

The following examples use the setCapture method to show different aspects of mouse capture.

This example shows the difference between detecting events using event bubbling and mouse capture.

<BODY  
    >
<DIV ID=oOwnCapture STYLE="background-color:#ccc;padding:6pt"
    ;
    >
<P>Mouse capture has been set to this gray division (DIV) 
    at load time using the setCapture method. The text area will 
    track the mousemove event through the <B>x</B> 
    and <B>y</B> properties of the event object.<BR>
<P>Event bubbling works as usual on objects within a 
    container that has mouse capture. Demonstrate this concept by 
    clicking the button below or changing the active window from 
    this one and then back. After oOwnCapture loses mouse capture, 
    the text area continues tracking the mousemove events only 
    while the cursor is over objects it contains.</P>
    <BR><BR>
<TEXTAREA ID=oWriteLocation COLS=9> </TEXTAREA>
</DIV>
<HR>
<DIV ID=oNoCapture>
<P>This white division is here to illustrate that mousemove 
    events over objects it contains are captured on the gray 
    division, oOwnCapture.
<INPUT VALUE="Move mouse over this object.">
<BUTTON>Click Anywhere to End Mouse Capture</BUTTON>
</DIV>
</BODY>

This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

This example shows how to use mouse capture to animate graphics.

<HEAD>
<SCRIPT>
var iRad = 25;
var iX01 = 165;
var iY01 = 170;
var iX02 = 285;
var iY02 = 170;

/* The doImgMouseMove function contains calculations to 
    reposition black.bmp in response to mouse movement  */
   
function doImgMouseMove()
{
  var iX1 = event.x - iX01;
  var iY1 = event.y - iY01;
  var iX2 = event.x - iX02;
  var iY2 = event.y - iY02;
  var change1 = Math.sqrt(iX1 * iX1 + iY1 * iY1);
  var change2 = Math.sqrt(iX2 * iX2 + iY2 * iY2);

  oPupilLeft.style.left = iX01 + iRad * iX1 / change1;
  oPupilLeft.style.top = iY01 + iRad * iY1 / change1;
  oPupilRight.style.left = iX02 + iRad * iX2 / change2;
  oPupilRight.style.top = iY02 + iRad * iY2 / change2;
}
</SCRIPT>
</HEAD>
<BODY  
    
    >
<INPUT TYPE=button ID=oToggle VALUE="Switch Mouse Capture On" 
    >
<IMG ID=oEye SRC="/workshop/graphics/eye.gif" 
    >
<IMG ID=oPupilLeft SRC="/workshop/graphics/black.gif">
<IMG ID=oPupilRight SRC="/workshop/graphics/black.gif">
<P>The eyeballs track pointer movement. When mouse 
    capture is on, they follow the pointer no matter where it 
    is positioned in the document. When mouse capture is off, they 
    detect and follow mouse position only while the pointer is 
    positioned over the eyeball graphic.</P>
<P>In this example, mouse capture is set when the document is 
    loaded. Click anywhere on the document to remove mouse 
    capture.</P>
</BODY>

This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

There is no public standard that applies to this method.

Applies To

A, ADDRESS, APPLET, AREA, B, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP