GlobalEventHandlers.oncontextmenu

oncontextmenu 是用来设置或获取全局事件(GlobalEventHandlers)中 上下文菜单事件(contextmenu (en-US)) 的处理函数(event handler)。

当在窗口上单击鼠标右键时,通常会触发 contextmenu 事件。 除非阻止默认行为,否则浏览器上下文菜单将被激活。

语法

target.oncontextmenu = functionRef;

属性值

functionRef 是一个函数名 或者是一个 函数表达式。 该函数接收 Event 作为唯一参数。

一次只能将一个 oncontextmenu 处理函数分配给一个对象。 你可能更喜欢使用 EventTarget.addEventListener() 作为替代, 因为这种方式更加灵活。

示例

禁用上下文菜单

右键单击通常会显示上下文菜单,但以下片段中将演示如何阻止在浏览器窗口(window)中显示上下文菜单。

HTML

<p>Try opening the context menu. Is it disabled?<p>

JavaScript

window.oncontextmenu = (e) => {
  e.preventDefault();
}

运行结果

一个右键暂停动画的示例

此示例中,单击右键打开上下文菜单时将会暂停旋转动画。

HTML

<div class="shape">Spinning</div>
<p class="note" hidden>Click to unpause.</p>

CSS

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

.shape {
  width: 8em;
  height: 8em;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 18s linear infinite;
  background: lightsalmon;
  border-radius: 42%;
  margin: 1em;
}

.paused {
  background-color: #ddd;
}

.paused .shape {
  animation-play-state: paused;
}

JavaScript

const body = document.querySelector('body');
const note = document.querySelector('.note');

function pause(e) {
  body.classList.add('paused');
  note.removeAttribute('hidden');
}

function play(e) {
  body.classList.remove('paused');
  note.setAttribute('hidden', '');
}

window.oncontextmenu = pause;
window.onpointerdown = play;

运行结果

规范

规范 状态 备注
HTML Living Standard
oncontextmenu
Living Standard

浏览器兼容性

BCD tables only load in the browser

除非阻止默认行为,否则右键单击将激活浏览器上下文菜单。但是, IE8 有一个 bug,如果定义了 contextmenu 处理函数,不会激活上下文菜单。

另请参见