files/zh-cn/conflicting/web/api/mouseevent/button/index.html


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

---
title: event.button
slug: conflicting/Web/API/MouseEvent/button
translation_of: Web/API/MouseEvent/button
translation_of_original: Web/API/event.button
original_slug: Web/API/event.button
---
<p>{{ ApiRef() }}</p>
<h3 id="Summary" name="Summary">概述</h3>
<p>表明当前事件是由鼠标的哪个按键触发的.</p>
<h3 id="Syntax" name="Syntax">语法</h3>
<pre>event.button
</pre>
<h3 id="例子">例子</h3>
<pre>var buttonCode = event.button;
</pre>
<p>该属性返回一个整数值,代表触发当前事件的鼠标按键.在通常情况下,对应关系如下:</p>
<ul>
 <li>0 为 左键点击.</li>
 <li>1 为 中键点击.</li>
 <li>2 为 右键点击.</li>
</ul>
<div class="note">
 <strong>注意:</strong> IE不遵守 See <a class="external" href="http://www.quirksmode.org/js/events_properties.html#button" title="http://www.quirksmode.org/js/events_properties.html#button">QuirksMode for details</a>.</div>
<p>The order of buttons may be different depending on how the pointing device has been configured.</p>
<h3 id="Example" name="Example">例子</h3>
<pre class="brush: html">&lt;script&gt;
var whichButton = function (e) {
    // 处理不同的事件模型
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
        btnCode = e.button;

        switch (btnCode) {
            case 0:
                alert('你按了左键.');
            break;
            case 1:
                alert('你按了中键.');
            break;
            case 2:
                alert('你按了右键.');
            break;
            default:
                alert('未知按键: ' + btnCode);
        }
    }
}
&lt;/script&gt;

&lt;button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();"&gt;请点击鼠标...&lt;/button&gt;
</pre>
<h3 id="Notes" name="Notes">备注</h3>
<p>Because mouse clicks are frequently intercepted by the user interface, it may be difficult to detect buttons other than those for a standard mouse click (usually the left button) in some circumstances.</p>
<p>Users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.</p>
<h3 id="Specification" name="Specification">规范</h3>
<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p>
<h3 id="浏览器兼容性">浏览器兼容性</h3>
<p>Based on Jan Wolter's <a class="external" href="http://unixpapa.com/js/mouse.html">JavaScript Madness: Mouse Events</a>.</p>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Gecko</th>
    <th>Webkit</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1</td>
    <td>523</td>
    <td>9</td>
    <td>8</td>
   </tr>
  </tbody>
 </table>
</div>
<p>{{ languages( { "ja": "ja/DOM/event.button", "pl": "pl/DOM/event.button" ,"en": "en/DOM/event.button" } ) }}</p>