---
title: GlobalEventHandlers.oncontextmenu
slug: Web/API/GlobalEventHandlers/oncontextmenu
tags:
- API
- Event Handler
- GlobalEventHandlers
- HTML DOM
- Property
- Reference
---
<div>{{ ApiRef("HTML DOM") }}</div>

<p><strong><code>oncontextmenu</code></strong> 是用来设置或获取全局事件({{domxref("GlobalEventHandlers")}})中 上下文菜单事件({{event("contextmenu")}}) 的处理函数({{domxref("EventHandler")}})。</p>

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

<h2 id="Syntax">语法</h2>

<pre class="brush: js"><em>target</em>.oncontextmenu = <em>functionRef</em>;
</pre>

<h3 id="Value">属性值</h3>

<p><code>functionRef</code> 是一个函数名 或者是一个 <a
    href="/en-US/docs/Web/JavaScript/Reference/Operators/function">函数表达式</a>。 该函数接收 {{domxref("Event")}} 作为唯一参数。</p>

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

<h2 id="Examples">示例</h2>

<h3 id="Disabling_context_menus">禁用上下文菜单</h3>

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

<h4 id="HTML">HTML</h4>

<pre
  class="brush: html">&lt;p&gt;Try opening the context menu. Is it disabled?&lt;p&gt;</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush:js;">window.oncontextmenu = (e) =&gt; {
  e.preventDefault();
}
</pre>

<h4 id="Result">运行结果</h4>

<p>{{EmbedLiveSample("Disabling_context_menus")}}</p>

<h3 id="Pausing_an_animation">一个右键暂停动画的示例</h3>

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

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;div class="shape"&gt;Spinning&lt;/div&gt;
&lt;p class="note" hidden&gt;Click to unpause.&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="JavaScript_2">JavaScript</h4>

<pre class="brush: js">
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;</pre>

<h4 id="Result_2">运行结果</h4>

<p>{{EmbedLiveSample("Pausing_an_animation", 700, 200)}}</p>

<h2 id="Specifications">规范</h2>

<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">规范</th>
      <th scope="col">状态</th>
      <th scope="col">备注</th>
    </tr>
    <tr>
      <td>{{SpecName('HTML WHATWG','webappapis.html#handler-oncontextmenu','oncontextmenu')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td></td>
    </tr>
  </tbody>
</table>

<h2 id="Browser_compatibility">浏览器兼容性</h2>

<div>

  <p>{{Compat("api.GlobalEventHandlers.oncontextmenu")}}</p>

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

<h2 id="See_also">另请参见</h2>

<ul>
  <li>{{event("contextmenu")}} 事件</li>
</ul>