From d92cc1c1695b3dad9a208412088189841c96af44 Mon Sep 17 00:00:00 2001 From: puxiao Date: Thu, 27 May 2021 14:20:49 +0800 Subject: [zh-cn]: Update web/api/globaleventhandlers/oncontextmenu/index.html --- .../globaleventhandlers/oncontextmenu/index.html | 142 +++++++++++++++++++-- 1 file changed, 130 insertions(+), 12 deletions(-) (limited to 'files/zh-cn') diff --git a/files/zh-cn/web/api/globaleventhandlers/oncontextmenu/index.html b/files/zh-cn/web/api/globaleventhandlers/oncontextmenu/index.html index b8f5b92aa3..89baebd1e1 100644 --- a/files/zh-cn/web/api/globaleventhandlers/oncontextmenu/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/oncontextmenu/index.html @@ -1,28 +1,146 @@ --- title: GlobalEventHandlers.oncontextmenu slug: Web/API/GlobalEventHandlers/oncontextmenu -translation_of: Web/API/GlobalEventHandlers/oncontextmenu +tags: +- API +- Event Handler +- GlobalEventHandlers +- HTML DOM +- Property +- Reference ---
{{ ApiRef("HTML DOM") }}
-

概述

+

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

-

获取或设置当前窗口contextmenu事件的事件处理函数。除非默认行为已经阻止了(看下面的例子是如何阻止的)，否则右键菜单会被激活。注意此事件会发生在没有阻止右键事件的情况下而且这不取决于此元素是否拥有了"contextmenu"属性.

+

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

-

语法

+

语法

-
window.oncontextmenu = funcRef;
-//funcRef是个函数引用
+
target.oncontextmenu = functionRef;
 

 
-
例子

+
属性值

 
-
这个例子会取消页面右键的功能：

+
functionRef 是一个函数名 或者是一个 函数表达式。 该函数接收 {{domxref("Event")}} 作为唯一参数。

 
-
window.oncontextmenu = function () {
-   return false;
+
一次只能将一个 oncontextmenu 处理函数分配给一个对象。 你可能更喜欢使用 {{domxref("EventTarget.addEventListener()")}} 作为替代,
+  因为这种方式更加灵活。

+
+
示例

+
+
禁用上下文菜单

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

+
+
HTML

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

+
+
JavaScript

+
+
window.oncontextmenu = (e) => {
+  e.preventDefault();
 }
-//该窗口禁止使用右键
 

 
-
{{ languages( {"en": "en/DOM/window.oncontextmenu" } ) }}

+
运行结果

+
+
{{EmbedLiveSample("Disabling_context_menus")}}

+
+
一个右键暂停动画的示例

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

+
+
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;

+
+
运行结果

+
+
{{EmbedLiveSample("Pausing_an_animation", 700, 200)}}

+
+
规范

+
+
+  
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+  
+
规范状态备注
{{SpecName('HTML WHATWG','webappapis.html#handler-oncontextmenu','oncontextmenu')}}{{Spec2('HTML WHATWG')}}

+
+
浏览器兼容性

+
+

+
+  
{{Compat("api.GlobalEventHandlers.oncontextmenu")}}

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

+

+
+
另请参见

+
+
    
+  
  • {{event("contextmenu")}} 事件
    • 
+

-- 
cgit v1.2.3-54-g00ecf