blob: 89baebd1e16bea8153d1655d3fd52c038d240a68 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
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"><p>Try opening the context menu. Is it disabled?<p></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush:js;">window.oncontextmenu = (e) => {
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"><div class="shape">Spinning</div>
<p class="note" hidden>Click to unpause.</p></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>
|
