From 463ca3feb6e6597659cae23398527d8ab8639dd3 Mon Sep 17 00:00:00 2001 From: allo Date: Fri, 3 Dec 2021 15:22:30 +0800 Subject: fix: fix live sample and sync with english version --- files/zh-cn/web/api/mouseevent/screenx/index.md | 112 +++++++++--------- files/zh-cn/web/api/mouseevent/screeny/index.md | 144 ++++++------------------ 2 files changed, 86 insertions(+), 170 deletions(-) diff --git a/files/zh-cn/web/api/mouseevent/screenx/index.md b/files/zh-cn/web/api/mouseevent/screenx/index.md index 05a83f9ba0..4f70603287 100644 --- a/files/zh-cn/web/api/mouseevent/screenx/index.md +++ b/files/zh-cn/web/api/mouseevent/screenx/index.md @@ -13,80 +13,72 @@ tags: - 鼠标事件 translation_of: Web/API/MouseEvent/screenX --- -

{{APIRef("DOM Events")}}

+{{APIRef("DOM Events")}} -

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

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

语法

+> **备注：** 在多屏显示的环境下，水平对齐的屏幕将被视为单个设备，因此 `screenX` 值的范围将增加到屏幕的组合宽度。 -
var pixelNumber = instanceOfMouseEvent.screenX
-
+## 语法 -

返回值

+```js +var x = instanceOfMouseEvent.screenX +``` -

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

+### 返回值 -

示例

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

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

+## 示例 -

HTML

+这个例子展示了当触发 {{Event("mousemove")}} 事件时鼠标的坐标。 -
<p>Move your mouse to see its position.</p>
-<p id="screen-log"></p>
+#### HTML -

JavaScript

+```html +

Move your mouse to see its position.

+

+``` -
let screenLog = document.querySelector('#screen-log');
+#### JavaScript
+
+```js
+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}`;
-}
- -

结果

- -

{{EmbedLiveSample("Example")}}

- -

规范

- - - - - - - - - - - - - - - - - - - - - - - - -
规范状态注释
{{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")}}

- -

参见

- -
- - +} +``` + +#### 结果 + +{{EmbedLiveSample("Example")}} + +### 路由事件 + +当你在窗口、文档或其他较大的元素上捕获事件时，可以获取事件的坐标（例如：click）然后作出正确的处理，如下所示： + +```js +function checkClickMap(e) { + if (e.screenX < 50) doRedButton(); + if (50 <= e.screenX && e.screenX < 100) doYellowButton(); + if (e.screenX >= 100) doRedButton(); +} +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{ domxref("MouseEvent") }} +- {{ domxref("MouseEvent.screenY","screenY") }} +- {{ domxref("MouseEvent.clientX","clientX") }} / {{ domxref("MouseEvent.clientY", "clientY") }} diff --git a/files/zh-cn/web/api/mouseevent/screeny/index.md b/files/zh-cn/web/api/mouseevent/screeny/index.md index c90e1708d2..0ef14fad21 100644 --- a/files/zh-cn/web/api/mouseevent/screeny/index.md +++ b/files/zh-cn/web/api/mouseevent/screeny/index.md @@ -9,128 +9,52 @@ tags: - 鼠标事件 translation_of: Web/API/MouseEvent/screenY --- -

{{APIRef("DOM Events")}}

+{{APIRef("DOM Events")}} -

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

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

语法

+## 返回值 -
var pixelNumber = instanceOfMouseEvent.screenY
-
+一个双精度浮点数。早期版本的规范定义将其一个整数值的像素数。有关详细信息，请参见浏览器兼容性部分。 -

返回值

+## 示例 -

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

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

示例

+### HTML -

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

+```html +

Move your mouse to see its position.

+

+``` -

HTML

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

JavaScript

- -
let screenLog = document.querySelector('#screen-log');
+```js
+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}`;
-}
- -

结果

- -

{{EmbedLiveSample("Example")}}

- -

规范

- - - - - - - - - - - - - - - - - - - - - - - - -
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()}}
-
- -

参见

- - +} +``` + +### 结果 + +{{EmbedLiveSample("Example")}} + +## 规范 + +{{Specifications}} + +### 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("MouseEvent")}} +- {{domxref("MouseEvent.screenX","screenX")}} +- {{domxref("MouseEvent.clientX","clientX")}} / {{domxref("MouseEvent.clientY", "clientY")}} -- cgit v1.2.3-54-g00ecf