MDN will switch to a new design later today, a sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

MouseEvent.button

这篇翻译不完整。请帮忙从英语翻译这篇文章

MouseEvent.button 返回一个数值,代表用户按下的鼠标按键,正是此按键触发了事件;只读属性。

This property only guarantees to indicate which buttons are pressed during events caused by pressing or releasing one or multiple buttons. As such, it is not reliable for events such as mouseentermouseleavemouseovermouseout or mousemove.

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.

Note: Do not confuse this property with the MouseEvent.buttons property, which indicates which buttons are pressed for all mouse events types.

语法

var buttonPressed = instanceOfMouseEvent.button

返回值

一个数值,代表按下的鼠标按键:

  • 0:主按键被按下,通常指鼠标左键 or the un-initialized state
  • 1:辅助按键被按下,通常指鼠标滚轮 or the middle button (if present)
  • 2:次按键被按下,通常指鼠标右键
  • 3:第四个按钮被按下,通常指浏览器后退按钮
  • 4:第五个按钮被按下,通常指浏览器的前进按钮

对于配置为左手使用的鼠标,按键操作将正好相反。此种情况下,从右至左读取值。

Example

<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('Left button clicked.');
            break;

            case 1:
                console.log('Middle button clicked.');
            break;

            case 2:
                console.log('Right button clicked.');
            break;

            default:
                console.log('Unexpected code: ' + btnCode);
        }
    }
}
</script>

<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click with mouse...</button>

Specifications

Specification Status Comment
Document Object Model (DOM) Level 3 Events Specification
MouseEvent.button
Working Draft Compared to Document Object Model (DOM) Level 2 Events Specification, the return value can be negative.
Document Object Model (DOM) Level 2 Events Specification
MouseEvent.button
Recommendation Initial definition.

Browser compatibility

Feature Edge Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (Yes) 1.0 (1.7 or earlier) 1.0 9.0 [1] (Yes) 3.0.4
Feature Edge Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) ? ? ? ? ?

[1] This convention is not followed in Internet Explorer prior to version 9: see QuirksMode for details.

See also

文档标签和贡献者

 此页面的贡献者: Dcfm
 最后编辑者: Dcfm,