From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/mouseevent/button/index.html | 111 +++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 files/zh-cn/web/api/mouseevent/button/index.html (limited to 'files/zh-cn/web/api/mouseevent/button/index.html') diff --git a/files/zh-cn/web/api/mouseevent/button/index.html b/files/zh-cn/web/api/mouseevent/button/index.html new file mode 100644 index 0000000000..57df922ffd --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/button/index.html @@ -0,0 +1,111 @@ +--- +title: MouseEvent.button +slug: Web/API/MouseEvent/button +translation_of: Web/API/MouseEvent/button +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.button是只读属性，它返回一个值，代表用户按下并触发了事件的鼠标按键。

+ +

这个属性只能够表明在触发事件的单个或多个按键按下或释放过程中哪些按键被按下了。因此，它对判断{{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mouseover")}}, {{event("mouseout")}} {{event("mousemove")}}这些事件并不可靠。

+ +

用户可能会改变鼠标按键的配置，因此当一个事件的MouseEvent.button值为0时，它可能不是由物理上设备最左边的按键触发的。但是对于一个标准按键布局的鼠标来说就会是左键。

+ +
+

注意：{{domxref("MouseEvent.buttons")}} 属性可指示任意鼠标事件中鼠标的按键情况，因此不要把它和MouseEvent.button属性弄混淆了。

+
+ +

语法

+ +
var buttonPressed = instanceOfMouseEvent.button
+
+ +

返回值

+ +

一个数值，代表按下的鼠标按键：

+ + + +

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

+ +

示例

+ +

HTML

+ +
<button id="button" oncontextmenu="event.preventDefault();">Click here with your mouse...</button>
+<p id="log"></p>
+
+ +

JavaScript

+ +
let button = document.querySelector('#button');
+let log = document.querySelector('#log');
+button.addEventListener('mouseup', logMouseButton);
+
+function logMouseButton(e) {
+  if (typeof e === 'object') {
+    switch (e.button) {
+      case 0:
+        log.textContent = 'Left button clicked.';
+        break;
+      case 1:
+        log.textContent = 'Middle button clicked.';
+        break;
+      case 2:
+        log.textContent = 'Right button clicked.';
+        break;
+      default:
+        log.textContent = `Unknown button code: ${e.button}`;
+    }
+  }
+}
+ +

结果

+ +

{{EmbedLiveSample("示例")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-button','MouseEvent.button')}}{{Spec2('DOM3 Events')}}Compared to {{SpecName('DOM2 Events')}}, the return value can be negative.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.button')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.MouseEvent.button")}}

+ +

参阅

+ + -- cgit v1.2.3-54-g00ecf