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
147
148
149
150
151
152
|
---
title: MouseEvent.button
slug: Web/API/MouseEvent/button
translation_of: Web/API/MouseEvent/button
---
<p>{{APIRef("DOM Events")}}</p>
<p><strong><code>MouseEvent.button</code></strong> свойство доступное только для чтения, возвращает значение, соответствующее нажатой кнопки мыши, которое инициировало событие.</p>
<p>Это свойство предоставляет информацию только о том, какая кнопка или несколько кнопок были нажаты или отпущены для инициации события, и не имеет отношения к таким событиям как {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mouseover")}}, {{event("mouseout")}} или {{event("mousemove")}}.</p>
<p>Пользователь может изменять конфигурацию кнопок своей мыши таким образом, что значение ноль будет получено при нажатии кнопки, не являющейся физически крайней левой кнопкой мыши, тем не менее, событие будет вести себя так, как будто левая кнопка была нажата в стандартной раскладкой кнопок.</p>
<div class="note">
<p><strong>Примечание:</strong> Не путайте это свойство со свойством {{domxref ( "MouseEvent.buttons")}}, которое содержит значения, соответствующие нажатым кнопкам мыши для всех типов событий мыши.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox notranslate">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.button
</pre>
<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
<p>Число, соответствующее нажатой кнопке:</p>
<ul>
<li><code>0</code>: Нажата основная кнопка. Левая кнопка мыши или переназначенная пользователем другая кнопка</li>
<li><code>1</code>: Нажата вспомогательная кнопка. Колёсико или средняя кнопка мыши, если она есть</li>
<li><code>2</code>: Нажата вторичная кнопка. Правая кнопка мыши</li>
<li><code>3</code>: Нажата четвёртая кнопка мыши. Обычно кнопка браузера <em>Назад</em></li>
<li><code>4</code>: Нажата пятая кнопка мыши. Обычно кнопка браузера <em>Вперёд</em></li>
</ul>
<p>Для мыши, перенастроенной под левую руку, значения нажатых кнопок меняются местами. В этом случае значения читаются справа налево.</p>
<h2 id="Пример">Пример</h2>
<pre class="brush: js notranslate"><script>
var whichButton = function (e) {
// Handle different event models
var e = e || window.event;
var btnCode;
if ('object' === typeof e) {
btnCode = e.button;
switch (btnCode) {
case 0:
console.log('Нажата левая кнопка.');
break;
case 1:
console.log('Нажата средняя кнопка или колёсико.');
break;
case 2:
console.log('Нажата правая кнопка.');
break;
default:
console.log('Неопределённое событие: ' + btnCode);
}
}
}
</script>
<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Нажмите кнопку мыши...</button></pre>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM3 Events','#widl-MouseEvent-button','MouseEvent.button')}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
<td>Compared to {{SpecName('DOM2 Events')}}, the return value can be negative.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.button')}}</td>
<td>{{Spec2('DOM2 Events')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Поддерживается_браузерами">Поддерживается браузерами</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(1)}}</td>
<td>1.0</td>
<td>9.0 [1]</td>
<td>{{CompatVersionUnknown}}</td>
<td>3.0.4</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Это соглашение не поддерживается браузерами Internet Explorer до версии 9: см. <a href="http://www.quirksmode.org/js/events_properties.html#button">QuirksMode for details</a>.</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{domxref('"MouseEvent"')}}</li>
</ul>
|
