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/altkey/index.html | 124 ++++++++++++++ files/zh-cn/web/api/mouseevent/button/index.html | 111 +++++++++++++ files/zh-cn/web/api/mouseevent/buttons/index.html | 121 ++++++++++++++ files/zh-cn/web/api/mouseevent/clientx/index.html | 85 ++++++++++ files/zh-cn/web/api/mouseevent/clienty/index.html | 83 ++++++++++ files/zh-cn/web/api/mouseevent/ctrlkey/index.html | 121 ++++++++++++++ .../web/api/mouseevent/getmodifierstate/index.html | 55 ++++++ files/zh-cn/web/api/mouseevent/index.html | 182 ++++++++++++++++++++ .../web/api/mouseevent/initmouseevent/index.html | 171 +++++++++++++++++++ files/zh-cn/web/api/mouseevent/metakey/index.html | 112 +++++++++++++ .../zh-cn/web/api/mouseevent/mouseevent/index.html | 184 +++++++++++++++++++++ .../zh-cn/web/api/mouseevent/movementx/index.html | 103 ++++++++++++ .../zh-cn/web/api/mouseevent/movementy/index.html | 101 +++++++++++ .../web/api/mouseevent/mozinputsource/index.html | 71 ++++++++ files/zh-cn/web/api/mouseevent/offsetx/index.html | 120 ++++++++++++++ files/zh-cn/web/api/mouseevent/offsety/index.html | 119 +++++++++++++ files/zh-cn/web/api/mouseevent/pagex/index.html | 126 ++++++++++++++ files/zh-cn/web/api/mouseevent/pagey/index.html | 122 ++++++++++++++ files/zh-cn/web/api/mouseevent/region/index.html | 56 +++++++ .../web/api/mouseevent/relatedtarget/index.html | 169 +++++++++++++++++++ files/zh-cn/web/api/mouseevent/screenx/index.html | 92 +++++++++++ files/zh-cn/web/api/mouseevent/screeny/index.html | 136 +++++++++++++++ files/zh-cn/web/api/mouseevent/shiftkey/index.html | 127 ++++++++++++++ files/zh-cn/web/api/mouseevent/which/index.html | 99 +++++++++++ files/zh-cn/web/api/mouseevent/x/index.html | 79 +++++++++ files/zh-cn/web/api/mouseevent/y/index.html | 83 ++++++++++ 26 files changed, 2952 insertions(+) create mode 100644 files/zh-cn/web/api/mouseevent/altkey/index.html create mode 100644 files/zh-cn/web/api/mouseevent/button/index.html create mode 100644 files/zh-cn/web/api/mouseevent/buttons/index.html create mode 100644 files/zh-cn/web/api/mouseevent/clientx/index.html create mode 100644 files/zh-cn/web/api/mouseevent/clienty/index.html create mode 100644 files/zh-cn/web/api/mouseevent/ctrlkey/index.html create mode 100644 files/zh-cn/web/api/mouseevent/getmodifierstate/index.html create mode 100644 files/zh-cn/web/api/mouseevent/index.html create mode 100644 files/zh-cn/web/api/mouseevent/initmouseevent/index.html create mode 100644 files/zh-cn/web/api/mouseevent/metakey/index.html create mode 100644 files/zh-cn/web/api/mouseevent/mouseevent/index.html create mode 100644 files/zh-cn/web/api/mouseevent/movementx/index.html create mode 100644 files/zh-cn/web/api/mouseevent/movementy/index.html create mode 100644 files/zh-cn/web/api/mouseevent/mozinputsource/index.html create mode 100644 files/zh-cn/web/api/mouseevent/offsetx/index.html create mode 100644 files/zh-cn/web/api/mouseevent/offsety/index.html create mode 100644 files/zh-cn/web/api/mouseevent/pagex/index.html create mode 100644 files/zh-cn/web/api/mouseevent/pagey/index.html create mode 100644 files/zh-cn/web/api/mouseevent/region/index.html create mode 100644 files/zh-cn/web/api/mouseevent/relatedtarget/index.html create mode 100644 files/zh-cn/web/api/mouseevent/screenx/index.html create mode 100644 files/zh-cn/web/api/mouseevent/screeny/index.html create mode 100644 files/zh-cn/web/api/mouseevent/shiftkey/index.html create mode 100644 files/zh-cn/web/api/mouseevent/which/index.html create mode 100644 files/zh-cn/web/api/mouseevent/x/index.html create mode 100644 files/zh-cn/web/api/mouseevent/y/index.html (limited to 'files/zh-cn/web/api/mouseevent') diff --git a/files/zh-cn/web/api/mouseevent/altkey/index.html b/files/zh-cn/web/api/mouseevent/altkey/index.html new file mode 100644 index 0000000000..0ced8e2f28 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/altkey/index.html @@ -0,0 +1,124 @@ +--- +title: MouseEvent.altKey +slug: Web/API/MouseEvent/altKey +tags: + - DOM事件 + - altKey + - 只读属性 + - 鼠标事件 +translation_of: Web/API/MouseEvent/altKey +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.altKey 只读属性是一个{{jsxref("Boolean")}}变量。当事件触发时，如果alt 被按下，则返回 true，否则返回false。

+ +

语法

+ +
var altKeyPressed = instanceOfMouseEvent.altKey
+
+ +

示例

+ +
<html>
+<head>
+<title>altKey example</title>
+
+<script type="text/javascript">
+
+function showChar(e){
+  alert(
+    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "ALT key pressed: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="showChar(event);">
+<p>
+Press any character key,
+with or without holding down the ALT key.<br />
+You can also use the SHIFT key together with the ALT key.
+</p>
+</body>
+</html>
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-altKey','MouseEvent.altkey')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.altkey')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

相关

+ + 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")}}

+ +

参阅

+ + diff --git a/files/zh-cn/web/api/mouseevent/buttons/index.html b/files/zh-cn/web/api/mouseevent/buttons/index.html new file mode 100644 index 0000000000..4e1b1afd0f --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/buttons/index.html @@ -0,0 +1,121 @@ +--- +title: MouseEvent.buttons +slug: Web/API/MouseEvent/buttons +translation_of: Web/API/MouseEvent/buttons +--- +
{{APIRef("DOM Events")}}
+ +
只读属性MouseEvent.buttons指示事件触发时哪些鼠标按键被按下。
+ +
+ +

每一个按键都用一个给定的数（见下文）表示。如果同时多个按键被按下，buttons 的值为各键对应值做与计算（+）后的值。例如，如果右键（2）和滚轮键（4）被同时按下，buttons 的值为 2 + 4 = 6。

+ +
+

注意：属性 MouseEvent.button 和 MouseEvent.buttons 是不同的。MouseEvent.buttons 可指示任意鼠标事件中鼠标的按键情况，而 MouseEvent.button 只能保证在由按下和释放一个或多个按键时触发的事件中获得正确的值。

+
+ +

语法

+ +
var buttonPressed = instanceOfMouseEvent.buttons
+
+ +

返回值

+ +

一个数字，用来标识鼠标按下的一个或者多个按键。如果按下的键为多个，则值等于所有按键对应数值进行或(|)运算的结果。

+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-buttons','MouseEvent.buttons')}}{{Spec2('DOM3 Events')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]43[2]9{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko supports the buttons attribute on Windows, Linux (GTK), and Mac OS with the following restrictions:

+ + + +

[2] This feature got implemented in bug 276941.

+ +

See also

+ + diff --git a/files/zh-cn/web/api/mouseevent/clientx/index.html b/files/zh-cn/web/api/mouseevent/clientx/index.html new file mode 100644 index 0000000000..009b338b12 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/clientx/index.html @@ -0,0 +1,85 @@ +--- +title: MouseEvent.clientX +slug: Web/API/MouseEvent/clientX +tags: + - API + - DOM + - DOM Events +translation_of: Web/API/MouseEvent/clientX +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.clientX 是只读属性， 它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。例如，不论页面是否有水平滚动，当你点击客户端区域的左上角时，鼠标事件的 clientX 值都将为 0 。最初这个属性被定义为长整型（long integer），如今 CSSOM 视图模块将其重新定义为双精度浮点数（double float）。你可以查阅浏览器兼容性部分的文档来进一步了解有关信息。

+ +

语法

+ +

+var x = instanceOfMouseEvent.clientX
+
+ +

返回值

+ +

被 CSSOM View Module 重新定义为一个 double 类型的浮点值. 原来这个属性是被定义为一个 long 整数. 可以在 "浏览器兼容性" 那里查看详细内容.

+ +

示例

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>clientX/clientY example</title>
+
+    <script>
+      function showCoords(evt){
+        alert(
+          "clientX value: " + evt.clientX + "\n" +
+          "clientY value: " + evt.clientY + "\n"
+        );
+      }
+    </script>
+  </head>
+  <body onmousedown="showCoords(event)">
+    <p>To display the mouse coordinates click anywhere on the page.</p>
+  </body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View','#dom-mouseevent-clientx', 'clientX')}}{{Spec2('CSSOM View')}}Redefines {{domxref("MouseEvent")}} from long to double.
{{SpecName('DOM3 Events','#widl-MouseEvent-clientX','MouseEvent.clientX')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientX')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

浏览器兼容性

+ + + +

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

+ +

相关

+ + diff --git a/files/zh-cn/web/api/mouseevent/clienty/index.html b/files/zh-cn/web/api/mouseevent/clienty/index.html new file mode 100644 index 0000000000..2c682695d9 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/clienty/index.html @@ -0,0 +1,83 @@ +--- +title: MouseEvent.clientY +slug: Web/API/MouseEvent/clientY +tags: + - CSSOM View + - MouseEvent +translation_of: Web/API/MouseEvent/clientY +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.clientY 是只读属性， 它提供事件发生时的应用客户端区域的垂直坐标 (与页面坐标不同)。例如，当你点击客户端区域的左上角时，鼠标事件的 clientY 值为 0 ，这一值与页面是否有垂直滚动无关。

+ +

语法

+ +
var y = instanceOfMouseEvent.clientY
+
+ +

Return value

+ +

被 CSSOM View Module 重新定义为一个 double 类型的浮点值. 原来这个属性是被定义为一个 long 整数. 可以在 "浏览器兼容性" 那里查看详细内容.

+ +

Example

+ +
<html>
+<head>
+<title>clientX\clientY example</title>
+
+<script type="text/javascript">
+function showCoords(evt){
+  alert(
+    "clientX value: " + evt.clientX + "\n"
+    + "clientY value: " + evt.clientY + "\n"
+  );
+}
+</script>
+</head>
+
+<body onmousedown="showCoords(event)">
+<p>To display the mouse coordinates click anywhere on the page.</p>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View','#dom-mouseevent-clienty', 'clientY')}}{{Spec2('CSSOM View')}}Redefines {{domxref("MouseEvent")}} from long to double.
{{SpecName('DOM3 Events','#widl-MouseEvent-clientY','MouseEvent.clientY')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientY')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

浏览器兼容性

+ + + +

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

+ +

查看更多

+ + diff --git a/files/zh-cn/web/api/mouseevent/ctrlkey/index.html b/files/zh-cn/web/api/mouseevent/ctrlkey/index.html new file mode 100644 index 0000000000..183a6e61cd --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/ctrlkey/index.html @@ -0,0 +1,121 @@ +--- +title: MouseEvent.ctrlKey +slug: Web/API/MouseEvent/ctrlKey +translation_of: Web/API/MouseEvent/ctrlKey +--- +

{{APIRef("DOM Events")}}

+ +

鼠标事件ctrlKey是只读属性，可返回一个布尔值，当ctrl键被按下，返回true，否则返回false

+ +

语法

+ +
var ctrlKeyPressed = instanceOfMouseEvent.ctrlKey
+
+ +

返回值

+ +

A boolean

+ +

示例

+ +
<html>
+<head>
+<title>ctrlKey example</title>
+
+<script type="text/javascript">
+
+function showChar(e){
+  alert(
+    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "CTRL key pressed: " + e.ctrlKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="showChar(event);">
+<p>Press any character key, with or without holding down the CTRL key.<br />
+You can also use the SHIFT key together with the CTRL key.</p>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-ctrlKey','MouseEvent.ctrlKey')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.ctrlKey')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/mouseevent/getmodifierstate/index.html b/files/zh-cn/web/api/mouseevent/getmodifierstate/index.html new file mode 100644 index 0000000000..c19bc41748 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/getmodifierstate/index.html @@ -0,0 +1,55 @@ +--- +title: MouseEvent.getModifierState() +slug: Web/API/MouseEvent/getModifierState +translation_of: Web/API/MouseEvent/getModifierState +--- +

{{APIRef("DOM Events")}}

+ +

The MouseEvent.getModifierState() method returns the current state of the specified modifier key: true if the modifier is active (i.e., the modifier key is pressed or locked), otherwise, false.

+ +

See the document of {{domxref("KeyboardEvent.getModifierState","KeyboardEvent.getModifierState()")}} for details.

+ +

语法

+ +
var active =​ event.getModifierState(keyArg);
+ +

返回值

+ +

A {{jsxref("Boolean")}}

+ +

参数

+ +
+
keyArg
+
A modifier key value. The value must be one of the {{domxref("KeyboardEvent.key")}} values which represent modifier keys or "Accel". This is case-sensitive.
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#widl-MouseEvent-getModifierState', 'getModifierState()')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

浏览器兼容性

+ + + +

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

+ +

See also

+ + diff --git a/files/zh-cn/web/api/mouseevent/index.html b/files/zh-cn/web/api/mouseevent/index.html new file mode 100644 index 0000000000..b6331ae58a --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/index.html @@ -0,0 +1,182 @@ +--- +title: 鼠标事件 +slug: Web/API/MouseEvent +translation_of: Web/API/MouseEvent +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：{{event("click")}}，{{event("dblclick")}}，{{event("mouseup")}}，{{event("mousedown")}}。

+ +

MouseEvent 派生自 {{domxref("UIEvent")}}，{{domxref("UIEvent")}} 派生自 {{domxref("Event")}}。虽然 MouseEvent.initMouseEvent() 方法保持向后兼容性，但是应该使用 MouseEvent() 构造函数创建一个 MouseEvent 对象。

+ +

一些具体的事件都派生自 MouseEvent：{{domxref("WheelEvent")}} 和{{domxref("DragEvent")}}。

+ +

{{InheritanceDiagram}}

+ +

构造函数

+ +
+
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
+
生成一个新的MouseEvent对象
+
+ +

属性

+ +

这个接口也继承了{{domxref("UIEvent")}} 和 {{domxref("Event")}}原型上的方法,

+ +
+
{{domxref("MouseEvent.altKey")}} {{readonlyinline}}
+
当鼠标事件触发的时，如果alt 键被按下，返回true;
+
{{domxref("MouseEvent.button")}} {{readonlyinline}}
+
当鼠标事件触发的时，如果鼠标按钮被按下（如果有的话），将会返回一个数值。
+
{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
+

当鼠标事件触发的时，如果多个鼠标按钮被按下（如果有的话），将会返回一个或者多个代表鼠标按钮的数字。

+
+
{{domxref("MouseEvent.clientX")}} {{readonlyinline}}
+
鼠标指针在点击元素（DOM）中的X坐标。
+
{{domxref("MouseEvent.clientY")}} {{readonlyinline}}
+
鼠标指针在点击元素（DOM）中的Y坐标。
+
{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
+
当鼠标事件触发时，如果 control 键被按下，则返回 true；
+
{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
+
当鼠标事件触发时，如果 meta键被按下，则返回 true；
+
{{domxref("MouseEvent.movementX")}} {{readonlyinline}}
+
鼠标指针相对于最后{{event("mousemove")}}事件位置的X坐标。
+
{{domxref("MouseEvent.movementY")}} {{readonlyinline}}
+
鼠标指针相对于最后{{event("mousemove")}}事件位置的Y坐标。
+
+ +
+
{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}
+
鼠标指针相对于目标节点内边位置的X坐标
+
{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}
+
鼠标指针相对于目标节点内边位置的Y坐标
+
{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}
+
鼠标指针相对于整个文档的X坐标；
+
{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}
+
鼠标指针相对于整个文档的Y坐标；
+
+ +
+
{{domxref("MouseEvent.region")}} {{readonlyinline}}
+
返回被点击事件影响的点击区域的id，如果没有区域被影响则返回null。
+
{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
+
+

鼠标事件的次要目标（如果有的话）

+
+
{{domxref("MouseEvent.screenX")}} {{readonlyinline}}
+
鼠标指针相对于全局（屏幕）的X坐标；
+
{{domxref("MouseEvent.screenY")}} {{readonlyinline}}
+
鼠标指针相对于全局（屏幕）的Y坐标；
+
{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
+
当鼠标事件触发时，如果 shift 键被按下，则返回 true；
+
{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}
+
当鼠标事件触发时，表示被按下的按钮。
+
{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}
+
点击事件发生时施加在触摸屏或者平板设备的压力量。这个数值在0.0（最小压力）和1.0（最大压力）之间。
+
{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}
+
生成事件的类型（若干 MOZ_SOURCE_* 常量如下列出）。可通过该属性获知鼠标事件是否由真实鼠标设备触发，亦或通过触摸事件触发（这可能影响处理坐标事件时的精确程度）。
+
{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
+
点击时施加的压力量。
+
{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}
+
{{domxref("MouseEvent.clientX")}}的别名。
+
{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}
+
 {{domxref("MouseEvent.clientY")}}的别名。
+
+ +

常量

+ +
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
正常点击所需的最小力量
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
强制点击所需的最小力量
+
+ +

方法

+ +

这个接口也继承了它的副方法{{domxref("UIEvent")}} 和{{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.getModifierState()")}}
+
返回指定修饰键的当前状态。请参照{{domxref("KeyboardEvent.getModifierState")}}() 查看详情。
+
{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
+
初始化创建MouseEvent的值。如果这个事件已经被分派，这个方法将不会做任何事情。
+
+ +

示例

+ +

这个例子演示了使用DOM方法在复选框上模拟一个点击事件（使用编程的方式生成点击事件）。

+ +
function simulateClick() {
+  var evt = new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);
+ +
<p><label><input type="checkbox" id="checkbox"> Checked</label>
+<p><button id="button">Click me</button>
+ +

点击按钮查看演示：

+ +

{{ EmbedLiveSample('示例', '', '', '') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}Redefines MouseEvent from long to double. This means that a PointerEvent whose pointerType is mouse will be a double.
{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}{{Spec2('Pointer Lock')}}From {{SpecName('DOM3 Events')}}, added movementX and movementY properties.
{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}From {{SpecName('DOM3 Events')}}, added offsetX and offsetY, pageX and pageY, x, and y properties. Redefined screen, page, client and coordinate (x and y) properties as double from long.
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}{{Spec2('DOM3 Events')}}From {{SpecName('DOM2 Events')}}, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

浏览器兼容性

+ +

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

+ +

参考

+ + diff --git a/files/zh-cn/web/api/mouseevent/initmouseevent/index.html b/files/zh-cn/web/api/mouseevent/initmouseevent/index.html new file mode 100644 index 0000000000..ffb87f8953 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/initmouseevent/index.html @@ -0,0 +1,171 @@ +--- +title: MouseEvent.initMouseEvent() +slug: Web/API/MouseEvent/initMouseEvent +translation_of: Web/API/MouseEvent/initMouseEvent +--- +

{{APIRef("DOM Events")}}{{deprecated_header}}

+ +

MouseEvent.initMouseEvent() 方法用以在鼠标事件创建时(一般用 {{domxref("Document.createEvent()")}}方法创建)初始化其属性的值。

+ +

事件初始化是在事件被{{ domxref("Document.createEvent()") }}方法创建后必需的。这个方法必须在事件被{{ domxref("EventTarget.dispatchEvent()") }}方法发送出来前调用。一旦事件被发送后，它将不再起任何作用。 

+ +
+

不要再用此方法，已过时。

+ +

使用特定的事件构造器来替代它，像 {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}。创建并发送事件 页面里有更多的使用信息。

+
+ +

语法

+ +
event.initMouseEvent(type, canBubble, cancelable, view,
+                     detail, screenX, screenY, clientX, clientY,
+                     ctrlKey, altKey, shiftKey, metaKey,
+                     button, relatedTarget);
+ +

形参

+ +
+
type
+
设置事件类型{{domxref("Event.type", "type")}} 的字符串，包含以下几种鼠标事件：click，mousedown，mouseup，mouseover，mousemove，mouseout。
+
canBubble
+
是否可以冒泡。取值集合见{{domxref("Event.bubbles")}}。
+
cancelable
+
是否可以阻止事件默认行为。取值集合见{{domxref("Event.cancelable")}}。
+
view
+
事件的AbstractView对象引用，这里其实指向{{domxref("window")}} 对象。取值集合见 {{domxref("UIEvent.view")}}。
+
detail
+
事件的鼠标点击数量。取值集合见{{domxref("Event.detail")}}。
+
screenX
+
事件的屏幕的x坐标。取值集合见{{domxref("MouseEvent.screenX")}}。
+
screenY
+
事件的屏幕的y坐标。取值集合见{{domxref("MouseEvent.screenY")}}。
+
clientX
+
事件的客户端x坐标。取值集合见{{domxref("MouseEvent.clientX")}}。
+
clientY
+
事件的客户端y坐标。取值集合见{{domxref("MouseEvent.clientY")}}。
+
ctrlKey
+
事件发生时 control 键是否被按下。取值集合见{{domxref("MouseEvent.ctrlKey")}}。
+
altKey
+
事件发生时 alt 键是否被按下。取值集合见{{domxref("MouseEvent.altKey")}}。
+
shiftKey
+
事件发生时 shift 键是否被按下。取值集合见{{domxref("MouseEvent.shiftKey")}}。
+
metaKey
+
事件发生时 meta 键是否被按下。取值集合见{{domxref("MouseEvent.metaKey")}}。
+
button
+
鼠标按键值 {{domxref("MouseEvent.button", "button")}}。
+
relatedTarget
+
事件的相关对象。只在某些事件类型有用 (例如 mouseover ?和 mouseout)。其它的传null。
+
+

 

+ +

?示例

+ +

HTML内容

+ + 
<div style="background:red;width:180px;padding:10px;">
+ <div id="out"></div>
+ <input type="text">
+</div>
+
+ +

JavaScript内容

+ + 
document.body.onclick = function(){
+ e = arguments[0];
+ var dt = e.target,stag = dt.tagName.toLowerCase();
+ document.getElementById("out").innerHTML = stag;
+};
+var simulateClick = function(){
+ var evt = document.createEvent("MouseEvents");
+ evt.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+ document.body.dispatchEvent(evt);
+}
+simulateClick();//Why it can not show "input" ?
+
+ +

这里有个在线演示

+ +

{{EmbedLiveSample('Example', 200, 36)}}

+ +

{{ LiveSampleLink('Example', 'Link to live demo') }}

+
+
+ +

标准

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#idl-interface-MouseEvent-initializers', 'MouseEvent.initMouseEvent()')}}{{Spec2('DOM3 Events')}}From {{SpecName('DOM2 Events')}}, deprecated.
{{SpecName('DOM2 Events', '#Events-Event-initMouseEvent', 'MouseEvent.initMouseEvent()')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
+
+ +

参阅

+ + diff --git a/files/zh-cn/web/api/mouseevent/metakey/index.html b/files/zh-cn/web/api/mouseevent/metakey/index.html new file mode 100644 index 0000000000..3857a4f284 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/metakey/index.html @@ -0,0 +1,112 @@ +--- +title: MouseEvent.metaKey +slug: Web/API/MouseEvent/metaKey +translation_of: Web/API/MouseEvent/metaKey +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.metaKey 为只读属性，返回一个 {{jsxref("Boolean", "布尔值")}}，在鼠标事件发生时，用于指示 Meta 键是按下状态（true），还是释放状态（false）。

+ +
+

备注：在 MAC 键盘上，表示 Command 键（⌘），在 Windows键盘上，表示 Windows 键（⊞）。

+
+ +

语法

+ +
var metaKeyPressed = instanceOfMouseEvent.metaKey
+
+ +

返回值

+ +

一个布尔值。

+ +

示例

+ +
 function goInput(e) {
+ // 检测 metaKey 值
+   if (e.metaKey) {
+        // 继续处理事件
+     superSizeOutput(e);
+   } else {
+     doOutput(e);
+   }
+ }
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范版本规范状态备注
{{SpecName('DOM3 Events','#widl-MouseEvent-ctrlKey','MouseEvent.ctrlKey')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.ctrlKey')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/mouseevent/mouseevent/index.html b/files/zh-cn/web/api/mouseevent/mouseevent/index.html new file mode 100644 index 0000000000..df7fd6c8c6 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/mouseevent/index.html @@ -0,0 +1,184 @@ +--- +title: MouseEvent() +slug: Web/API/MouseEvent/MouseEvent +tags: + - API + - Constructor + - DOM + - MouseEvent + - 事件 + - 构造器 + - 鼠标 + - 鼠标事件 +translation_of: Web/API/MouseEvent/MouseEvent +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent() 构造器创建一个 {{domxref("MouseEvent")}}。

+ +

语法

+ +
 event = new MouseEvent(typeArg, mouseEventInit);
+ +

形参

+ +
+
typeArg
+
{{domxref("DOMString")}} 格式的事件名称。
+
mouseEventInit {{optional_inline}}
+
+ +
+
初始化 MouseEvent 的字典，有下列属性字段： + +
    +
  • "screenX"，long 型可选，默认为 0，设置鼠标事件发生时相对于用户屏幕的水平坐标位置；该操作并不会改变真实鼠标的位置。
    • +
  • "screenY"，long 型可选，默认为 0，设置鼠标事件发生时相对于用户屏幕的垂直坐标位置；该操作并不会改变真实鼠标的位置。
    • +
  • "clientX"，long 型可选，默认为 0，设置鼠标事件时相对于客户端窗口的水平坐标位置；该操作并不会改变真实鼠标的位置。
    • +
  • "clientY"，long 型可选，默认为 0，设置鼠标事件时相对于客户端窗口的垂直坐标位置；该操作并不会改变真实鼠标的位置。
    • +
  • "ctrlKey"，{{jsxref("Boolean")}} 型可选，默认为false，标明是否同时按下 ctrl 键。
    • +
  • "shiftKey"，{{jsxref("Boolean")}} 型可选，默认为false，标明是否同时按下 shift 键。
    • +
  • "altKey"，{{jsxref("Boolean")}} 型可选，默认为 false，标明是否同时按下 alt 键。
    • +
  • "metaKey"，{{jsxref("Boolean")}} 型可选，默认为false，标明是否同时按下 meta 键。
    • +
  • "button"，short 型可选，默认为 0，描述了当事件发生时，哪个按键被按下或释放： + + + + + + + + + + + + + + + + + + + + + +
    值含义
    0主按键被按下（通常为左键）或未初始化
    1辅助按键被按下 (通常为中键)
    2次按键被按下 (通常为右键)
    +
    • +
  • "buttons"，无符号 short 型可选，默认为 0，描述了当事件发生时哪些按键被按下： + + + + + + + + + + + + + + + + + + + + + + + + + +
    位域值
    + （Bit-field value）    		含义
    0无按键被按下
    1主按键被按下 (通常为左键)
    2次按键被按下 (通常为右键)
    4辅助按键被按下 (通常为中键)
    +
    • +
  • "relatedTarget"，{{domxref("EventTarget")}} 型可选，默认为 null，若事件为 {{event("mouseenter")}} 或 {{event("mouseover")}}，则表示刚离开的元素；若事件为 {{event("mouseout")}} 或 {{event("mouseleave")}}，则表示刚进入的元素。
    • +
  • "region"，{{domxref("DOMString")}} 型可选，默认为null，标明点击事件影响的区域 DOM 的 id。不影响任何区域的话，请传null值。
    • +
+ +

在一些实现中，passing anything other than a number for the screen and client fields will throw a TypeError.

+ +
+

上述 MouseEventInit 字典字段还包括从 {{domxref("UIEvent.UIEvent", "UIEventInit")}} 和 {{domxref("Event.Event", "EventInit")}} 继承来的字典字段。

+
+
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-mouseevent-region", 'region value')}}{{Spec2('HTML WHATWG')}}From {{SpecName('DOM3 Events')}}, added the "region" value in the dictionary.
{{SpecName('DOM3 Events','#interface-MouseEvent','MouseEvent()')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

浏览器兼容性

+ + + +

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

+ +

Polyfill

+ +

You can polyfill the MouseEvent() constructor functionality in Internet Explorer 9 and higher with the following code:

+ +
(function (window) {
+  try {
+    new MouseEvent('test');
+    return false; // No need to polyfill
+  } catch (e) {
+		// Need to polyfill - fall through
+  }
+
+    // Polyfills DOM4 MouseEvent
+	var MouseEventPolyfill = function (eventType, params) {
+		params = params || { bubbles: false, cancelable: false };
+		var mouseEvent = document.createEvent('MouseEvent');
+		mouseEvent.initMouseEvent(eventType,
+			params.bubbles,
+			params.cancelable,
+			window,
+			0,
+			params.screenX || 0,
+			params.screenY || 0,
+			params.clientX || 0,
+			params.clientY || 0,
+			params.ctrlKey || false,
+			params.altKey || false,
+			params.shiftKey || false,
+			params.metaKey || false,
+			params.button || 0,
+			params.relatedTarget || null
+		);
+
+		return mouseEvent;
+	}
+
+	MouseEventPolyfill.prototype = Event.prototype;
+
+	window.MouseEvent = MouseEventPolyfill;
+})(window);
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/mouseevent/movementx/index.html b/files/zh-cn/web/api/mouseevent/movementx/index.html new file mode 100644 index 0000000000..084428207d --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/movementx/index.html @@ -0,0 +1,103 @@ +--- +title: MouseEvent.movementX +slug: Web/API/MouseEvent/movementX +translation_of: Web/API/MouseEvent/movementX +--- +

{{APIRef("DOM Events")}}

+ +

 MouseEvent.movementX 是只读属性，它提供了当前事件和上一个{{event("mousemove")}}事件之间鼠标在水平方向上的移动值。换句话说，这个值是这样计算的 : currentEvent.movementX = currentEvent.screenX - previousEvent.screenX.

+ +

语法

+ +
var xShift = instanceOfMouseEvent.movementX
+
+ +

返回值

+ +

一个数字

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Lock','#widl-MouseEvent-movementX','MouseEvent.movementX')}}{{Spec2('Pointer Lock')}}Initial definition
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(22.0)}} {{property_prefix("webkit")}}
+ {{CompatChrome(37.0)}} unprefixed		{{CompatVersionUnknown}} +

{{CompatGeckoDesktop(1.0)}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop(41)}}

+ 		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatChrome(37)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}} {{property_prefix("moz")}}
+ {{CompatGeckoMobile(41)}}		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }}{{CompatVersionUnknown}} {{property_prefix("webkit")}}
+ {{CompatChrome(37.0)}} unprefixed
+
+ +

相关

+ + diff --git a/files/zh-cn/web/api/mouseevent/movementy/index.html b/files/zh-cn/web/api/mouseevent/movementy/index.html new file mode 100644 index 0000000000..1faaccff17 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/movementy/index.html @@ -0,0 +1,101 @@ +--- +title: MouseEvent.movementY +slug: Web/API/MouseEvent/movementY +translation_of: Web/API/MouseEvent/movementY +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.movementY 是只读属性，它提供了当前事件和上一个 {{event("mousemove")}} 事件之间鼠标在水平方向上的移动值。换句话说，这个值是这样计算的 :currentEvent.movementY = currentEvent.screenY - previousEvent.screenY.

+ +

语法

+ +
var yShift = instanceOfMouseEvent.movementY
+
+ +

返回值

+ +

A number

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Lock','#widl-MouseEvent-movementY','MouseEvent.movementY')}}{{Spec2('Pointer Lock')}}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(22.0)}} {{property_prefix("webkit")}}
+ {{CompatChrome(37.0)}} unprefixed		{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop(41)}}		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatChrome(37.0)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}} {{property_prefix("moz")}}
+ {{CompatGeckoMobile(41)}}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}} {{property_prefix("webkit")}}
+ {{CompatChrome(37.0)}} unprefixed
+
+ +

相关

+ + diff --git a/files/zh-cn/web/api/mouseevent/mozinputsource/index.html b/files/zh-cn/web/api/mouseevent/mozinputsource/index.html new file mode 100644 index 0000000000..bb4e530ced --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/mozinputsource/index.html @@ -0,0 +1,71 @@ +--- +title: MouseEvent.mozInputSource +slug: Web/API/MouseEvent/mozInputSource +tags: + - API +translation_of: Web/API/MouseEvent/mozInputSource +--- +

{{ APIRef() }}

+ +

{{ gecko_minversion_header("2.0") }}

+ +

{{ Non-standard_header() }}

+ +

{{domxref("MouseEvent")}}中的MouseEvent.mozInputSource是只读属性，它提供触发事件的设备信息。例如，当一个鼠标事件发生时，你能根据MouseEvent.mozInputSource属性判断该事件是由鼠标还是由触屏设备触发的（这将影响到你对于事件发生坐标解释的精确度）。

+ +

语法

+ +
var source = event.mozInputSource;
+ +

值

+ +

下列值都是合法的

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常量名称值描述
MOZ_SOURCE_UNKNOWN0该事件是由未知设备触发的。
MOZ_SOURCE_MOUSE1该事件是由鼠标（或类似的设备）触发的。
MOZ_SOURCE_PEN2该事件是由触屏笔在写字板上触发的。
MOZ_SOURCE_ERASER3该事件是由触屏橡皮擦在写字板上触发的。
MOZ_SOURCE_CURSOR4该事件是由指针触发的。
MOZ_SOURCE_TOUCH5该事件是在触屏设备上触发的。
MOZ_SOURCE_KEYBOARD6该事件是由键盘触发的。
+ +

详述

+ +

无

diff --git a/files/zh-cn/web/api/mouseevent/offsetx/index.html b/files/zh-cn/web/api/mouseevent/offsetx/index.html new file mode 100644 index 0000000000..28c6719863 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/offsetx/index.html @@ -0,0 +1,120 @@ +--- +title: MouseEvent.offsetX +slug: Web/API/MouseEvent/offsetX +tags: + - API + - 只读 + - 属性 + - 鼠标事件 +translation_of: Web/API/MouseEvent/offsetX +--- +

{{APIRef("DOM Events")}}{{SeeCompatTable}}

+ +

{{domxref("MouseEvent")}} 接口的只读属性 offsetX 规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量。

+ +

语法

+ +
var xOffset = instanceOfMouseEvent.offsetX;
+
+ +

返回值

+ +

一个双精度 浮点值。早期的规范将其规定为整数值。详见浏览器兼容性部分。

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}}{{Spec2('CSSOM View')}}Initial definition
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}6{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Redefined from long to double{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("43.0")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Redefined from long to double{{CompatChrome(56)}}{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/mouseevent/offsety/index.html b/files/zh-cn/web/api/mouseevent/offsety/index.html new file mode 100644 index 0000000000..7b1eab0450 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/offsety/index.html @@ -0,0 +1,119 @@ +--- +title: MouseEvent.offsetY +slug: Web/API/MouseEvent/offsetY +tags: + - API + - 只读属性 + - 鼠标事件 +translation_of: Web/API/MouseEvent/offsetY +--- +

{{APIRef("DOM Events")}}{{SeeCompatTable}}

+ +

MouseEvent 接口的只读属性 offsetY 规定了事件对象与目标节点的内填充边（padding edge）在 Y 轴方向上的偏移量。

+ +

语法

+ +
var yOffset = instanceOfMouseEvent.offsetY;
+
+ +

返回值

+ +

一个双精度 浮点值。早期的规范将其规定为整数值。详见浏览器兼容性部分。

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-mouseevent-offsety', 'MouseEvent')}}{{Spec2('CSSOM View')}}Initial definition
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}6{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Redefined from long to double{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("43.0")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Redefined from long to double{{CompatChrome(56)}}{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/mouseevent/pagex/index.html b/files/zh-cn/web/api/mouseevent/pagex/index.html new file mode 100644 index 0000000000..06e933334d --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/pagex/index.html @@ -0,0 +1,126 @@ +--- +title: MouseEvent.pageX +slug: Web/API/MouseEvent/pageX +translation_of: Web/API/MouseEvent/pageX +--- +

{{APIRef("DOM Events")}}

+ +

 pageX 是一个由{{domxref("MouseEvent")}}接口返回的相对于整个文档的x（水平）坐标以像素为单位的只读属性。

+ +

这个属性将基于文档的边缘，考虑任何页面的水平方向上的滚动。举个例子，如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。

+ +

 起初这个属性被定义为长整型。 CSSOM 视图模块将它重新定位为双浮点数类型。请参阅浏览器兼容性部分了解详情。

+ +

语法

+ +
var pos = event.pageX
+ +

例子

+ +
var pageX = event.pageX;
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-mouseevent-pagex', 'pageX')}}{{Spec2('CSSOM View')}}Redefined from long to double.
{{SpecName('Touch Events', '#widl-Touch-pageX', 'pageX')}}{{Spec2('TouchEvents')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(45.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Redefined from long to double{{CompatChrome(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(45.0)}}{{CompatChrome(45.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Redefined from long to double{{CompatChrome(56)}}{{CompatChrome(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参考

+ + diff --git a/files/zh-cn/web/api/mouseevent/pagey/index.html b/files/zh-cn/web/api/mouseevent/pagey/index.html new file mode 100644 index 0000000000..22a862d9eb --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/pagey/index.html @@ -0,0 +1,122 @@ +--- +title: MouseEvent.pageY +slug: Web/API/MouseEvent/pageY +translation_of: Web/API/MouseEvent/pageY +--- +

{{APIRef("DOM Events")}}

+ +

pageY是一个只读属性，它返回触发事件的位置相对于整个 document 的 Y 坐标值。由于其参考物是整个 dom，所以这个值受页面垂直方向的滚动影响。例如：当你垂直方向向下滚动了 50 pixel，那么你在顶端进行点击的时候，获取的pageY为 50pixed 而不是 0。最初这个属性被定义为长整型（long integer），如今 CSSOM 视图模块将其重新定义为双精度浮点数（double float）。你可以查阅浏览器兼容性部分的文档来进一步了解有关信息。

+ +

语法

+ +
var pos = event.pageY
+ +

示例

+ +
var pageY = event.pageY;
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-mouseevent-pagey', 'pageY')}}{{Spec2('CSSOM View')}}Redefined from long to double.
{{SpecName('Touch Events', '#widl-Touch-pagey', 'pageY')}}{{Spec2('TouchEvents')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(45)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Redefined from long to double{{CompatChrome(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(45.)}}{{CompatChrome(45)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Redefined from long to double{{CompatChrome(56)}}{{CompatChrome(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

更多请见

+ + diff --git a/files/zh-cn/web/api/mouseevent/region/index.html b/files/zh-cn/web/api/mouseevent/region/index.html new file mode 100644 index 0000000000..15bdf83f92 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/region/index.html @@ -0,0 +1,56 @@ +--- +title: MouseEvent.region +slug: Web/API/MouseEvent/region +tags: + - API + - Canvas + - DOM Events + - MouseEvent +translation_of: Web/API/MouseEvent/region +--- +
{{APIRef("DOM Events")}}
+ +

The MouseEvent.region read-only property returns the id of the canvas hit region affected by the event. If no hit region is affected, null is returned.

+ +

语法

+ +
var hitRegion = instanceOfMouseEvent.region
+
+ +

返回值

+ +

A {{domxref("DOMString")}} representing the id of the hit region.

+ +

例子

+ +
<canvas id="canvas"></canvas>
+
+<script>
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: "circle"});
+
+canvas.addEventListener("mousemove", function(event){
+  if(event.region) {
+    console.log("hit region: " + event.region);
+  }
+});
+</script>
+
+ +

浏览器兼容性

+ + + +

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

+ +

更多参考

+ + diff --git a/files/zh-cn/web/api/mouseevent/relatedtarget/index.html b/files/zh-cn/web/api/mouseevent/relatedtarget/index.html new file mode 100644 index 0000000000..a184a8a2f3 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/relatedtarget/index.html @@ -0,0 +1,169 @@ +--- +title: MouseEvent.relatedTarget +slug: Web/API/MouseEvent/relatedTarget +translation_of: Web/API/MouseEvent/relatedTarget +--- +
{{APIRef("DOM Events")}}
+ +
只读属性MouseEvent.relatedTarget 是鼠标事件的次要目标（如果存在），它包括：
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
事件名称targetrelatedTarget
{{Event("focusin")}}{{domxref("EventTarget")}} 获取焦点{{domxref("EventTarget")}} 失去焦点
{{Event("focusout")}}{{domxref("EventTarget")}} 失去焦点The {{domxref("EventTarget")}} 获取焦点
{{Event("mouseenter")}}指针设备进入{{domxref("EventTarget")}}指针设备离开{{domxref("EventTarget")}}
{{Event("mouseleave")}}指针设备离开 {{domxref("EventTarget")}}指针设备进入 {{domxref("EventTarget")}}
{{Event("mouseout")}}指针设备离开 {{domxref("EventTarget")}}The {{domxref("EventTarget")}}
{{Event("mouseover")}}指针设备进入 {{domxref("EventTarget")}}指针设备离开 {{domxref("EventTarget")}}
{{Event("dragenter")}}指针设备进入 {{domxref("EventTarget")}}指针设备离开 {{domxref("EventTarget")}}
{{Event("dragexit")}}指针设备离开 {{domxref("EventTarget")}}指针设备进入 {{domxref("EventTarget")}}
+ +

如果事件没有次要目标，relatedTarget 将返回 null.

+ +

语法

+ +
var target = instanceOfMouseEvent.relatedTarget
+
+ +

返回值

+ +

 {{domxref("EventTarget")}} 对象或者 null.

+ +

示例

+ +

尝试将你的鼠标移入移出红色和蓝色方块。

+ +

HTML

+ +
<body id="body">
+  <div id="outer">
+    <div id="red"></div>
+    <div id="blue"></div>
+  </div>
+  <p id="log"></p>
+</body>
+ +

CSS

+ +
#outer {
+  width: 250px;
+  height: 125px;
+  display: flex;
+}
+
+#red {
+  flex-grow: 1;
+  background: red;
+}
+
+#blue {
+  flex-grow: 1;
+  background: blue;
+}
+
+#log {
+  max-height: 120px;
+  overflow-y: scroll;
+}
+ +

JavaScript

+ +
const mouseoutLog = document.getElementById('log'),
+      red = document.getElementById('red'),
+      blue = document.getElementById('blue');
+
+red.addEventListener('mouseover', overListener);
+red.addEventListener('mouseout', outListener);
+blue.addEventListener('mouseover', overListener);
+blue.addEventListener('mouseout', outListener);
+
+function outListener(event) {
+  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";
+
+  mouseoutLog.innerText = `\nfrom ${event.target.id} into ${related} ${mouseoutLog.innerText}`;
+}
+
+function overListener(event) {
+  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";
+
+  log.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example", 700, 280)}}

+ +

详述

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-relatedTarget','MouseEvent.relatedTarget')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.altkey')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

浏览器兼容性

+ + + +

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

+ +

另见

+ + diff --git a/files/zh-cn/web/api/mouseevent/screenx/index.html b/files/zh-cn/web/api/mouseevent/screenx/index.html new file mode 100644 index 0000000000..1f3f484d14 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/screenx/index.html @@ -0,0 +1,92 @@ +--- +title: MouseEvent.screenX +slug: Web/API/MouseEvent/screenX +tags: + - API + - MouseEvent + - Property + - events + - 事件 + - 参考 + - 属性 + - 鼠标 + - 鼠标事件 +translation_of: Web/API/MouseEvent/screenX +--- +

{{APIRef("DOM Events")}}

+ +

 screenX 是 {{domxref("MouseEvent")}} 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。

+ +

语法

+ +
var pixelNumber = instanceOfMouseEvent.screenX
+
+ +

返回值

+ +

一个双精度浮点值。早期版本的规范将该值定义为整数值的像素数。有关详细信息，请参见浏览器兼容性部分。

+ +

示例

+ +

这个例子展示了当触发 {{Event("mousemove")}} 事件时鼠标的坐标。

+ +

HTML

+ +
<p>Move your mouse to see its position.</p>
+<p id="screen-log"></p>
+ +

JavaScript

+ +
let screenLog = document.querySelector('#screen-log');
+document.addEventListener('mousemove', logKey);
+
+function logKey(e) {
+  screenLog.innerText = `
+    Screen X/Y: ${e.screenX}, ${e.screenY}
+    Client X/Y: ${e.clientX}, ${e.clientY}`;
+}
+ +

结果

+ +

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSSOM View','#dom-mouseevent-screenx', 'screenX')}}{{Spec2('CSSOM View')}}Redefines {{domxref("MouseEvent")}} from long to double. 
{{SpecName('DOM3 Events','#widl-MouseEvent-screenX','MouseEvent.screenX')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenX')}}{{Spec2('DOM2 Events')}}Initial definition
+ +

浏览器兼容性

+ +

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

+ +

参见

+ +
+ + diff --git a/files/zh-cn/web/api/mouseevent/screeny/index.html b/files/zh-cn/web/api/mouseevent/screeny/index.html new file mode 100644 index 0000000000..4ae5210e23 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/screeny/index.html @@ -0,0 +1,136 @@ +--- +title: MouseEvent.screenY +slug: Web/API/MouseEvent/screenY +tags: + - API + - 参考 + - 属性 + - 鼠标 + - 鼠标事件 +translation_of: Web/API/MouseEvent/screenY +--- +

{{APIRef("DOM Events")}}

+ +

 screenX 是 MouseEvent 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。

+ +

语法

+ +
var pixelNumber = instanceOfMouseEvent.screenY
+
+ +

返回值

+ +

一个double值。早期版本的规范定义将其一个整数值的像素数。有关详细信息，请参见浏览器兼容性部分。

+ +

示例

+ +

这个例子展示了当触发 {{Event("mousemove")}} 事件时鼠标的坐标。

+ +

HTML

+ +
<p>Move your mouse to see its position.</p>
+<p id="screen-log"></p>
+ +

JavaScript

+ +
let screenLog = document.querySelector('#screen-log');
+document.addEventListener('mousemove', logKey);
+
+function logKey(e) {
+  screenLog.innerText = `
+    Screen X/Y: ${e.screenX}, ${e.screenY}
+    Client X/Y: ${e.clientX}, ${e.clientY}`;
+}
+ +

结果

+ +

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View','#dom-mouseevent-screeny', 'screenY')}}{{Spec2('CSSOM View')}}Redefines {{domxref("MouseEvent")}} from long to double. 
{{SpecName('DOM3 Events','#widl-MouseEvent-screenY','MouseEvent.screenY')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenY')}}{{Spec2('DOM2 Events')}}Initial definition
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}6{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/mouseevent/shiftkey/index.html b/files/zh-cn/web/api/mouseevent/shiftkey/index.html new file mode 100644 index 0000000000..a31ab83fb1 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/shiftkey/index.html @@ -0,0 +1,127 @@ +--- +title: MouseEvent.shiftKey +slug: Web/API/MouseEvent/shiftKey +translation_of: Web/API/MouseEvent/shiftKey +--- +

{{APIRef("DOM Events")}}

+ +

MouseEvent.shiftKey 是只读属性，指出触发鼠标事件时是否按住了 shift 键

+ +

Syntax

+ +
var shiftKeyPressed = instanceOfMouseEvent.shiftKey
+
+ +

Return value

+ +

A boolean

+ +

Example

+ +
<html>
+<head>
+<title>shiftKey example</title>
+
+<script type="text/javascript">
+
+function showChar(e){
+  alert(
+    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "SHIFT key pressed: " + e.shiftKey + "\n"
+    + "ALT key pressed: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="showChar(event);">
+<p>Press any character key, with or without holding down
+ the SHIFT key.<br />
+You can also use the SHIFT key together with the ALT key.</p>
+</body>
+</html>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-MouseEvent-shiftKey','MouseEvent.shiftKey')}}{{Spec2('DOM3 Events')}}No change from {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.shiftKey')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/mouseevent/which/index.html b/files/zh-cn/web/api/mouseevent/which/index.html new file mode 100644 index 0000000000..591412dda3 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/which/index.html @@ -0,0 +1,99 @@ +--- +title: MouseEvent.which +slug: Web/API/MouseEvent/which +tags: + - API + - 只读 + - 非标准 + - 鼠标事件 +translation_of: Web/API/MouseEvent/which +--- +

{{APIRef("DOM Events")}}

+ +

{{Non-standard_header}}

+ +

只读属性 MouseEvent.which 显示了鼠标事件是由哪个鼠标按键被按下所触发的。其他获得该信息的标准属性是 {{ domxref("MouseEvent.button") }} 与 {{ domxref("MouseEvent.buttons") }} 。

+ +

语法

+ +
var buttonPressed = instanceOfMouseEvent.which
+
+ +

返回值

+ +

表示一个特定按键的数字：

+ + + +

如果鼠标被设置为适用于左利手人士使用，那么引发的动作恰好相反。在这种情况下，该值应该从右往左看。

+ +

规范

+ +

无规范定义该属性。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]1.09.05.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{ CompatGeckoMobile(1) }} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] 在 {{event("mousemove")}} 事件对象上， which 属性被错误地设定为 1 {{bug(1048294)}}.

+ +

相关内容

+ + diff --git a/files/zh-cn/web/api/mouseevent/x/index.html b/files/zh-cn/web/api/mouseevent/x/index.html new file mode 100644 index 0000000000..bd2e29dd21 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/x/index.html @@ -0,0 +1,79 @@ +--- +title: MouseEvent.x +slug: Web/API/MouseEvent/x +translation_of: Web/API/MouseEvent/x +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

MouseEvent.x 是 {{domxref("MouseEvent.clientX")}} 属性的别名.

+ +

标准

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-mouseevent-x', 'MouseEvent.x')}}{{Spec2('CSSOM View')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(53)}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(53)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/api/mouseevent/y/index.html b/files/zh-cn/web/api/mouseevent/y/index.html new file mode 100644 index 0000000000..e7dfc7bd85 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/y/index.html @@ -0,0 +1,83 @@ +--- +title: MouseEvent.y +slug: Web/API/MouseEvent/y +tags: + - API + - 只读属性 + - 鼠标事件 +translation_of: Web/API/MouseEvent/y +--- +

{{APIRef}}{{SeeCompatTable}}

+ +

MouseEvent.y 属性是 {{domxref("MouseEvent.clientY")}} 属性的别称。

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-mouseevent-y', 'MouseEvent.y')}}{{Spec2('CSSOM View')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(53)}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(53)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
-- cgit v1.2.3-54-g00ecf