The mouse capture methods setCapture and releaseCapture, along with the onlosecapture event, enable authors to design context menus for Web pages. Capturing mouse events enables authors to create a context menu easily without firing mouse events for other objects on the page.
In this sample, a context menu is created that opens when the user right-clicks a specific object on the Web page. The menu itemizes all the properties for the object and enables the user to click a property and obtain its value. The oncontextmenu event is canceled so that the new context menu can be displayed.
If you are not familiar with mouse capture or Dynamic HTML (DHTML), the Related Topics section provides links to additional information.
The following steps detail the procedure for creating a context menu using mouse capture.
- Add the context menu to the document.
A DIV element is used to enclose the context menu. An onclick event handler on the BODY calls the fnDetermine function.
The fnDetermine function verifies that the correct conditions exist before opening the context menu.
<BODY
>
<DIV
MENUSTATUS = "false"
ID = oContextMenu
CLASS = "menu">
</DIV>
- Add mouse capture to the menu.
The fnDetermine function controls the functionality of the context menu and mouse capture ability. It determines whether the menu is opened or closed, if mouse events are captured or released, and what other mouse events are fired. When the menu opens and begins capturing mouse events, all onclick events are handled with the fnDetermine function.
The fnDetermine function first checks the bContextKey Boolean before processing the click event. The bContextKey Boolean is set when an attempt is made to open the default context menu in Windows Internet Explorer. If no attempt to open the default context menu was made, the function looks for a custom MENUSTATUS attribute that determines the state of the menu.
If the MENUSTATUS attribute value is false, the menu is open. When the menu is open, the setCapture method is set and the menu is populated with a list of properties from the object that was clicked.
However, if the menu is already open when an object is clicked, the menu is closed and releaseCapture is invoked to remove mouse capture.
If one of the listed properties in the context menu is clicked, then the value of that property is returned before the menu is closed.
function fnDetermine(){
oWorkItem=event.srcElement;
if(bContextKey == "true"){
// Continue if the menu is closed.
if(oContextMenu.MENUSTATUS == "false"){
// Give the menu mouse capture.
oContextMenu.setCapture();
// Move the menu ten pixels right of the mouse.
oContextMenu.style.top = event.clientY + 10;
// Move the menu ten pixels lower than the mouse.
oContextMenu.style.left = event.clientX + 10;
// Clear the menu contents.
oContextMenu.innerHTML = "Stand By...";
// Display the menu.
oContextMenu.style.display = "block";
// Pause for one-tenth of a second so user can see the message.
window.setTimeout("fnPopulate(oWorkItem)",100);
// Indicate that the menu is now open.
oContextMenu.MENUSTATUS = "true";
event.returnValue = false;
}
}
else{
// Continue if the menu is open.
if(oContextMenu.MENUSTATUS == "true"){
// Continue if a menu item was clicked.
if((oWorkItem.parentElement.id == "oContextMenu")&&(oWorkItem.getAttribute("component")=="menuitem")){
// Continue if the title wasn't clicked.
if(oWorkItem.innerText.indexOf("Properties for") == -1){
// Display the value of the property.
alert("Status For Object: " + oContextObject.tagName + "\nProperty: " + oWorkItem.innerText + "\nValue: " + oContextObject.tagName + "." + oWorkItem.innerText + " = " + eval("oContextObject." + oWorkItem.innerText));
// Turn off highlights.
fnHighlightOff();
}
}
// Hide the menu.
oContextMenu.style.display = "none";
// Indicate the menu is closed.
oContextMenu.MENUSTATUS = "false";
// Remove mouse capture from the menu.
oContextMenu.releaseCapture();
oContextMenu.innerHTML = "";
// Stop processing the event.
event.returnValue = false;
}
}
} - Dynamically create the new context menu.
When the menu is opened, it is populated with a list of properties from the object that was clicked. The fnPopulate and fnAddItem functions are used to fill the context menu with this information. A second custom attribute, COMPONENT, is used to identify the individual values returned to the context menu. The COMPONENT attribute is mainly used to identify the object when it is highlighted and to obtain the value of the property for the object.
// Return a list of properties to the context menu.
function fnPopulate(oTarget){
oContextMenu.innerHTML = "";
oContextObject = oTarget;
iMenuItems=0;
fnAddItem(oContextMenu,"Properties for: <B>" + oTarget.tagName + "</B>");
for(i in oTarget){
if((eval("oTarget." + i) != "[object]") &&
(eval("oTarget." + i) != "") &&
(eval("oTarget." + i) != null)){
fnAddItem(oContextMenu,i);
}
}
for(i in oTarget.style){
if((eval("oTarget.style." + i)!= "") &&
(eval("oTarget.style." + i)!= null)){
fnAddItem(oContextMenu,"style." + i);
}
}
}
function fnAddItem(oTargetGroup,sContent){
oTargetGroup.innerHTML += '<
SPAN COMPONENT = "menuitem"
ID = oMenuItem' + iMenuItems + '>'
+ sContent
+ '</SPAN><BR>';
iMenuItems++;
} - Create the menu style.
A menu STYLE is defined so the context menu can be moved anywhere on the Web page. The menu is moved in the fnDetermine function every time it is opened. The style provides both appearance and absolute position.
<STYLE>
.menu{
cursor: hand;
display: none;
cursor: hand;
position: absolute;
top: 0;
left: 0;
background-color: "#CFCFCF";
border: "1 solid";
border-top-color: "#EFEFEF";
border-left-color: "#EFEFEF";
border-right-color: "#505050";
border-bottom-color: "#505050";
font-size: 8pt;
font-family: Arial;}
</STYLE> - Add script to replace the default context menu.
When the user right-clicks, the default context menu is canceled and the new context menu opens. A Boolean is set to true when the default menu is opened. The fnDetermine function is called to open the new menu. The Boolean is set back to false and the default context menu is canceled.
bContextKey = "false";
function fnSuppress(){
bContextKey=true;
fnDetermine();
bContextKey=false;
return false;
} - Add mouse event highlights.
For a menu to be functional, it must provide some feedback to the user.
Highlighting menu items when the mouse moves over them provides such feedback.
The fnHighLightOn function is very specific about remaining within the client area.
When mouse capture is enabled on the menu in the fnDetermine function, the srcElement property on the event object returns values for areas within the browser window but not outside the client area. Because these areas aren't exposed to the DHTML Document Object Model (DOM), they are avoided.
function fnHighlightOn(){
// Continue if the mouse is inside the client area.
if((event.clientX > 0) &&
(event.clientY > 0) &&
(event.clientX < document.body.offsetWidth) &&
(event.clientY < document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component") == "menuitem"){
oWorkItem.style.backgroundColor = "#CCCCFF";
oWorkItem.style.color = "#FF0000";
}
}
}
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.
The methods setCapture and releaseCapture, and the onlosecapture event are invaluable resources for developing dynamic content. Capturing mouse events enables authors to develop menus that better respond to user interaction.