[This documentation is preliminary and is subject to change.]
Fires when the user clicks the right mouse button in the client area, opening the context menu.
Syntax
| HTML Attribute | <element oncontextmenu = "handler(event)"> |
|---|---|
| Event Property | object.oncontextmenu = handler; |
| attachEvent Method | object.attachEvent("oncontextmenu", handler) |
| addEventListener Method | object.addEventListener("contextmenu", handler, useCapture) |
Standards information
There are no standards that apply here.
Event information
| Synchronous | No |
|---|---|
| Bubbles | No |
| Cancelable | No |
Event handler parameters
- pEvtObj [in]
-
Type: IHTMLEventObj
Remarks
Opens the context menu. To cancel the default behavior, set the returnValue property of the event object to false.
To invoke this event, do one of the following:
- Right-click the object.
The pEvtObj parameter is required for the following interfaces:
- HTMLAnchorEvents2
- HTMLAreaEvents2
- HTMLButtonElementEvents2
- HTMLControlElementEvents2
- HTMLDocumentEvents2
- HTMLElementEvents2
- HTMLFormElementEvents2
- HTMLImgEvents2
- HTMLFrameSiteEvents2
- HTMLInputFileElementEvents2
- HTMLInputImageEvents2
- HTMLInputTextElementEvents2
- HTMLLabelEvents2
- HTMLLinkElementEvents2
- HTMLMapEvents2
- HTMLMarqueeElementEvents2
- HTMLObjectElementEvents2
- HTMLOptionButtonElementEvents2
- HTMLScriptEvents2
- HTMLSelectElementEvents2
- HTMLStyleElementEvents2
- HTMLTableEvents2
- HTMLTextContainerEvents2
- HTMLWindowEvents2
Examples
This example shows how to prevent a context menu from appearing by canceling the oncontextmenu event handler.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/oncontextmenu.htm
<span style="width: 300px; background-color: blue; color: white;"
oncontextmenu="return false">
The context menu never displays when you right-click in this box. </span>
Although area elements inherit the oncontextmenu event by way of the object hierarchy, they do not respond to right-click events in Internet Explorer. However, it is possible to imitate the desired behavior by using the onfocus and onblur events to determine the currently selected region and trigger the appropriate action in the context menu handler of the img itself. Although it isn't used by Internet Explorer, retain the oncontextmenu event attribute on the area elements for a fully cross-client implementation.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/oncontextmenuEX1.htm
<script type="text/javascript">
var selectedArea = null;
function activate(e,f) {
selectedArea = f ? e : null;
}
function menu(e) {
if (selectedArea)
alert('right-click: ' + selectedArea.id);
else {
// cross-client case
if (e.tagName == 'AREA')
alert('right-click: ' + e.id);
else
alert('right-click: ' + e.tagName);
}
return false;
}
</script>
<map id="Map0">
<area id="Area1" onfocus="activate(this,true)" onblur="activate(this,false)"
oncontextmenu="return menu(this)" shape="rect" coords="100, 50, 200, 150" href="..."/>
</map>
<img src="..." oncontextmenu="return menu(this)" usemap="#Map0" />
Build date: 3/14/2012
N.B. #2. Although this event is triggered onmouseup-right it does not return event.button.
N.B. #3.There is no distinction for this event triggered by the keyboard vs. by the mouse, And, There is no way for the onmouseup event to cancel its oncontextmenu event.
N.B. #4. This event -by key or right button- causes the cursor to readjust position (e.g. drops from DL-first-text-end to first-DT/DD-text-front).
REMEDY: Preset a flag, onkeydown and onmousedown, etc.... And read it oncontextmenu.
EXAMPLES: 1. Right-drag documents up-down/left-right --but-- Right-click-or-Key popup a context menu.
CONCEPT: Context Menu, unlike ordinary menus, is only invoked, by either mouse or key, and oncontextmenu must figure itself out, what its context and which its menu.
Be warned that in IE8 standards mode the <body> no longer automatically fills the browser client area unless you force it to. Right-clicks outside defined content won't necessarily be trapped. In the following example, the context menu is trapped ONLY if the boxed area (the body itself) is right-clicked.
<!DOCTYPE html>
<body style="border:1px solid black; background:lightgray;" oncontextmenu="alert('Mode:IE'+document.documentMode); return false">
Context menu is disabled inside this area only.
</body>