javascript

Chapter 12: Events
contextmenu event to specifically indicate when a context menu is about to be displayed, allowing
developers to cancel the default context menu and provide their own.
The contextmenu event bubbles, so a single event handler can be assigned to a document that handles
all such events for the page. The target of the event is the element that was acted on. This event can be
canceled in all browsers, using event.preventDefault() in DOM - compliant browsers and setting
event.returnValue to false in IE. The contextmenu event is considered a mouse event and so has
all of the properties related to the cursor position. Typically, a custom context menu is displayed using
an oncontextmenu event handler and hidden again using the onclick event handler. Consider the
following HTML page:
< html >
< head >
< title > ContextMenu Event Example < /title >
< /head >
< body >
< div id=”myDiv” > Right click or Ctrl+click me to get a custom context menu. Click
anywhere else to get the default context menu. < /div >
< ul id=”myMenu” style=”position:absolute;visibility:hidden;background-color:
silver” >
< li > < a href=”http://www.nczonline.net” > Nicholas ’ site < /a > < /li >
< li > < a href=”http://www.wrox.com” > Wrox site < /a > < /li >
< li > < a href=”http://www.yahoo.com” > Yahoo! < /a > < /li >
< /ul >
< /body >
< /html >
In this code, a < div > is created that has a custom context menu. The < ul > element serves as the custom
context menu and is initially hidden. The JavaScript to make this example work is as follows:
EventUtil.addHandler(window, “load”, function(event){
var div = document.getElementById(“myDiv”);
});
EventUtil.addHandler(div, “contextmenu”, function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});
var menu = document.getElementById(“myMenu”);
menu.style.left = event.clientX + “px”;
menu.style.top = event.clientY + “px”;
menu.style.visibility = “visible”;
EventUtil.addHandler(document, “click”, function(event){
document.getElementById(“myMenu”).style.visibility = “hidden”;
});
Here, an oncontextmenu event handler is defined for the < div > . The event handler begins by canceling
the default behavior, ensuring that the browser ’ s context menu won ’ t be displayed. Next, the < ul >
element is placed into position based on the clientX and clientY properties of the event object. The
last step is to show the menu by setting its visibility to “ visible ” . An onclick event handler is
408