Element: contextmenu event

contextmenu 事件会在用户尝试打开上下文菜单时被触发。该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发,如果使用菜单键,该上下文菜单会被展示 到所聚焦元素的左下角,但是如果该元素是一棵DOM树的话,上下文菜单便会展示在当前这一行的左下角。

任何没有被禁用的鼠标右击事件 (通过调用事件的 preventDefault() 方法) 将会使得 contextmenu 事件在目标元素上被触发。

Bubbles(冒泡) Yes
Cancelable(可撤销) Yes
Interface(接口) MouseEvent
Event handler property(事件处理器) oncontextmenu

实例

在下面的例子中,第一段内容被触发的 contextmenu 事件的默认行为被 preventDefault() 取消了,因此,在第一段右击鼠标时什么也不会发生,但是右键单击第二段内容时,则会出现标准的菜单内容,与平时右击普通页面出现的菜单内容一致。

HTML

<p id="noContextMenu">这个段落右键菜单已被禁用。</p>
<p>但是这个段落没有被禁用。</p>

JavaScript

noContext = document.getElementById('noContextMenu');

noContext.addEventListener('contextmenu', e => {
  e.preventDefault();
});

Result

规范

规范 状态 说明
HTML Living Standard
contextmenu
Living Standard

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
contextmenu eventChrome Full support 1Edge Full support 12Firefox Full support 6IE Full support 9Opera Full support 10.5Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

参见