Microsoft Internet Explorer 5 enables Web authors to design pages that handle mouse events in the same way desktop applications do. Mouse capture enables Web authors to designate a Introduction to Dynamic HTML object to handle all mouse activity on a page. Mouse capture offers several advantages to Web design that enable 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 (DHTML), the provided information should be sufficient to implement mouse capture. If you are new to using DHTML, 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 enables authors to focus mouse event handling on one object. When an object participates in mouse capture:
- Mouse events can have multiple functions.
Consider a Web page that allows a user to create a spreadsheet with capabilities similar to Microsoft Excel. If one cell is selected and dragged onto another, the response would depend upon the event handlers for both cells. Using mouse capture allows both cells to share a single event handler that would be able to perform the necessary action. Without mouse capture, handling this action would require a lot of event handlers and conditions to determine what action was being performed.
- Mouse events for the captured object work everywhere within the client.
A Web page that includes numerous dynamic elements, such as a puzzle, needs to handle a variety of events. Mouse capture can be used to preserve event handlers that are needed for a particular object. For example, consider a puzzle piece with mouse capture that is dropped behind another piece. Although unseen, it can still be moved because the mouse events used to move it would still be handled by that object until it loses capture.
- Mouse events can be selectively handled.
For example, if a Web page provides mouse-driven help—as seen in the upper-right corner of the Organize Favorites dialog box in Windows Internet Explorer—the default action when clicking on an element is canceled. Canceling the default click action enables the Web page to deliver the help text for that element. If the action is not canceled, the help text might be delivered, but the action might change the location or content of the page and the help text would no longer be accessible.
Another example is a drop-down menu. By using mouse capture to respond to a drop-down menu when mouse events are fired by a user, the mouse activity can be used to determine the state of the page. For example, when a drop-down menu is open, access to A and FORM elements might be restricted until the menu is closed. Restricting access to some elements would enable the user to click anywhere on the screen to close the menu without firing additional events for the object that was clicked. Using mouse capture to enable the menu to determine which mouse events should be fired frees authors from assigning mouse events to every object on the page to check for the same conditions.
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 fire only 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.
While an object is capturing mouse events, event handlers are used to determine which action is performed.
After an object is using setCapture, the releaseCapture method is used to remove mouse capture.
The releaseCapture method can be called from the object with mouse capture, or from the document. 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:
- Opening shortcut menus
- Invoking the alert method
- Scrolling through the Web document
- Losing focus on the window
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 pop-up 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 enables 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 because clicking it controls the menu status.
The following steps outline the construction of a menu that uses mouse capture.
- Define the objects 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>
- 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.
- Include the fnDetermine function to handle click events on the BODY.
The onclick event on the BODY fires when a user clicks the Web page. While the menu is closed, links and buttons function as usual. After 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 Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
