contextmenu | oncontextmenu event (Windows)

This topic has not yet been rated - Rate this topic

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;
addEventListener Method	object.addEventListener("contextmenu", handler, useCapture)

Event information

Synchronous	No
Bubbles	No
Cancelable	No

Event handler parameters

pEvtObj [in]: Type: IHTMLEventObj

Standards information

There are no standards that apply here.

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.

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 a Windows Store app using JavaScript. 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.


<script type="text/javascript">
var selectedArea = null;
function activate(e,f) {
    selectedArea = f ? e : null;
}
function menu(e) { 
    if (selectedArea)
        console.log('right-click: ' + selectedArea.id); 
    else {
        // cross-client case
        if (e.tagName == 'AREA')
            console.log('right-click: ' + e.id); 
        else
            console.log('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" />

contextmenu | oncontextmenu event