blob: f99474b97028c7c5b03110ac1bca56086b6b6231 (
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
|
---
title: GlobalEventHandlers.onauxclick
slug: Web/API/GlobalEventHandlers/onauxclick
tags:
- API
- Event Handler
- Experimental
- auxclick
translation_of: Web/API/GlobalEventHandlers/onauxclick
---
<div>
<div>{{SeeCompatTable}}{{ ApiRef("HTML DOM") }}</div>
</div>
<div> </div>
<p><strong>onauxclick</strong> 属性是一个 {{domxref("EventHandler")}}，当 {{event("auxclick")}} 事件发生时被调用，例如按下了输入设备上的非主按钮 (e.g. 鼠标中键)。</p>
<p>实现该属性的一个目标是，提高浏览器与按钮行为之间的兼容性 - 事件行为正在更新，以便 {{Event("click")}} 只触发主按钮点击（例如，鼠标左键）。然后开发人员可以使用 {{Event("auxclick")}} 来为非主按钮点击提供明确的行为。在此之前，{{Event("click")}} 通常会针对所有输入设备按钮点击，浏览器行为有些不一致。</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="syntaxbox"><var>element</var>.onauxclick = <var>functionRe<em>f</em></var><em>(e);</em>
</pre>
<p>事件处理函数是一个 {{domxref("MouseEvent")}} 对象。只有事件被触发的按钮不同，该事件和普通点击事件的行为是完全相同的。</p>
<h2 id="Example" name="Example">示例</h2>
<p>在这个例子中我们定义了两个事件处理函数：<code>onclick</code> 和 <code>onauxclick</code>。前者改变按钮背景的颜色，而后者改变按钮前景（文本）的颜色。您可以通过使用多按钮鼠标尝试演示来查看这两种功能(<a href="https://mdn.github.io/dom-examples/auxclick/">see it live on GitHub</a>; also <a href="https://github.com/mdn/dom-examples/blob/master/auxclick/index.html">see the source code</a>)。</p>
<pre class="brush: js">var button = document.querySelector('button');
var html = document.querySelector('html');
function random(number) {
return Math.floor(Math.random() * number);
}
button.onclick = function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
button.style.backgroundColor = rndCol;
};
button.onauxclick = function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
button.style.color = rndCol;
}</pre>
<div class="note">
<p><strong>Note</strong>: 如果您使用的是三键鼠标，您会注意到在单击任一非鼠标左键时该 <code>onauxclick</code> 处理程序会运行。</p>
</div>
<h2 id="Notes" name="Notes">Notes</h2>
<p>当用户点击一个元素时，将引发该 <code>click</code> 事件。之后的 click 事件将发生在 <code>mousedown</code> 和 <code>mouseup</code> 事件之后。</p>
<p>每次只有一个 <code>click</code> 处理程序可以通过此属性分配给一个对象。您可能倾向于使用{{domxref("EventTarget.addEventListener()")}} 方法，因为它更灵活并且是 DOM Events 规范的一部分。</p>
<h2 id="Specification" name="Specification">规范</h2>
<p><code>onauxclick</code> 不是任何官方规范的一部分，它被定义在 <a href="https://wicg.github.io/auxclick/">auxclick Draft Community Group Report</a>.</p>
<h2 id="Browser_Compatibility">Browser Compatibility</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop(53)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop(53)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
|
