Click to return to the DHTML, HTML     
How To Create a Mouse Cap...     Dynamic HTML    
Web Workshop  |  DHTML, HTML & CSS

Mouse Capture Overview


Microsoft® Internet Explorer 5 allows Web authors to design pages that handle mouse events in the same way desktop applications do. Mouse capture enables Web authors to designate a Dynamic HTML object to handle all mouse activity on a page. Mouse capture offers several advantages to Web design that allow authors to enhance feature-rich content. Authors can provide the complex interactivity needed for Web-based implementations of desktop applications, such as spreadsheets.

If you've authored Web pages using Dynamic HTML, the provided information should be sufficient to implement mouse capture. If you are new to using Dynamic HTML, the Related Topics section includes additional links that provide good background information.

Advantages of Mouse Capture

Prior to mouse capture, mouse events handled through event bubbling could be blocked. Mouse capture allows authors to focus mouse event handling on one object. When an object participates in mouse capture:

Implementing Mouse Capture

The crux of mouse capture is picking up mouse events and determining what to do with them. Delegating event handling to one object allows that object to handle mouse events from the rest of the page. Whether a Web page is designed to incorporate a drop-down menu or emulate an arcade game, mouse capture permits a user to better interact with a Web page.

Mouse capture functionality is implemented using the setCapture and releaseCapture methods, and the onlosecapture event. An object can maintain mouse capture while a page is visible, or only for a particular action. It is important to determine the need for mouse capture before implementing it so a user has the best possible experience with a Web page.

The setCapture method accepts an optional Boolean value. By default, the Boolean value is true and the object with mouse capture will fire all events, regardless of the origin. Setting the Boolean to false will cause the object with mouse capture to only fire events contained within it.

All mouse events fire on an object with setCapture, including:

When a mouse event fires, the srcElement property exposed by the event object returns the object positioned under the mouse rather than the object with mouse capture. Other events such as onkeydown, onkeyup, and onkeypress continue to fire normally.

Using the setCapture method on an object is straightforward. When an object invokes the setCapture method, it captures all mouse events. For example, the following code sets mouse capture on a menu:

oMenu.setCapture();

While an object is capturing mouse events, event handlers are used to determine which action is performed.

Once an object is using setCapture, the releaseCapture method is used to remove mouse capture.

oMenu.releaseCapture();

The releaseCapture method can be called from the object with mouse capture, or from the document object. Invoking releaseCapture on the document object releases mouse capture without determining which object is capturing mouse events.

When an object loses mouse capture, the onlosecapture event fires. An object can lose mouse capture under several circumstances, including:

The onlosecapture event can be used to handle special circumstances that might arise when mouse capture is set. For example, if a drop-down menu is open and the menu loses capture, the onlosecapture event can be used to close the menu.

Sample of Mouse Capture

Consider a generic Web-based popup menu that provides arbitrary information. Mouse events need to be monitored if the information menu opens and closes when the Web page is clicked. Capturing mouse events allows an author to prevent undesired behavior such as clicking links or form components while the menu is open. In addition, the menu's capabilities are broadened and it can take advantage of the captured mouse events fired elsewhere on the document. The setCapture method is used on the BODY element since clicking it controls the menu status.

The following steps outline the construction of a menu that uses mouse capture:

  1. Define the object used for the menu.

    A menu can consist of any desired combination of objects. For this sample, a DIV is used.

    <DIV ID="oMenu" CLASS="menu"></DIV>
    

    The menu class assigns the DIV an absolute position and a display equal to none, in addition to a starting top and left position.

    <STYLE>
    .menu {display: none; position: absolute; top: 0; left: 0;}
    </STYLE>
    
  2. Define the object used to capture mouse events.

    The BODY element includes the onclick event to fire the fnDetermine function. This function uses the setCapture and releaseCapture methods to give the BODY element mouse capture, as well as opening the menu.

    <BODY onclick="fnDetermine()">
    
  3. Include the fnDetermine function to handle click events on the BODY.

    The onclick event on the BODY fires when a user clicks on the Web page. While the menu is closed, links and buttons function as usual. Once the BODY is clicked and the menu is open, links and buttons are not permitted to function. The Web page operates as usual when the menu is closed.

    function fnDetermine(){
       oWorkItem = event.srcElement;
       // Make sure menu doesn't interfere with links and buttons.
    
       if((oWorkItem.tagName == "BODY")
       &&(oWorkItem.tagName != "BUTTON" | "B" | "A")){
    
          if(oMenu.style.display == "none"){
             // setCapture on the BODY.
             document.body.setCapture();
             // Show the menu.
          }
    
          else{
             // releaseCapture on the body.
             document.body.releaseCapture();
             // Hide the menu.
          }
       }
    }
    
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Related Topics



Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.