diff --git a/files/zh-cn/web/api/touch/screenx/index.md b/files/zh-cn/web/api/touch/screenx/index.md index 240b5b1cdd72cb..4ebb27f9d1b482 100644 --- a/files/zh-cn/web/api/touch/screenx/index.md +++ b/files/zh-cn/web/api/touch/screenx/index.md @@ -1,31 +1,46 @@ --- -title: Touch.screenX +title: Touch:screenX 属性 slug: Web/API/Touch/screenX +l10n: + sourceCommit: b71d118ffc6d72b77efad9661110fcc9ede464eb --- -{{ ApiRef() }} +{{ APIRef("Touch Events") }} -### 概述 +返回触摸点相对于屏幕的 X 坐标,不包括任何滚动偏移。 -返回触点相对于屏幕左边沿的 X 坐标。不包含页面滚动的偏移量。 +## 值 -### 语法 +数字。 -```plain -var x = touchItem.screenX; -``` +## 示例 + +此示例演示了如何访问 {{domxref("Touch")}} 对象的 `Touch.screenX` 和 {{domxref("Touch.screenY")}} 属性。`Touch.screenX` 属性是触摸点相对于屏幕的水平(x)坐标,以 CSS 像素为单位。{{domxref("Touch.screenY")}} 属性是触摸点相对于屏幕的垂直坐标,以 CSS 像素为单位。 -### 返回值 +在以下简单代码片段中,我们假设用户在 id 为 `source` 的元素上发起多个触摸点接触,然后释放与表面的接触。当触发 {{domxref("Element/touchstart_event", "touchstart")}} 事件处理器时,可以访问每个触摸点的 `Touch.screenX` 和 {{domxref("Touch.screenY")}} 坐标。 -- `x` - - : 触点相对于屏幕左边沿的 X 坐标。不包含页面滚动的偏移量。 +```js +// 为“source”元素注册一个 touchstart 监听器。 +const src = document.getElementById("source"); + +src.addEventListener( + "touchstart", + (e) => { + // 遍历每个触点并记录 screenX/Y 坐标。 + // 每个坐标的单位是 CSS 像素。 + for (let i = 0; i < e.touches.length; i++) { + console.log(`touchpoint[${i}].screenX = ${e.touches[i].screenX}`); + console.log(`touchpoint[${i}].screenY = ${e.touches[i].screenY}`); + } + }, + false, +); +``` -### 标准定义 +## 规范 -[Touch Events Specification](http://www.w3.org/TR/touch-events/) +{{Specifications}} -### 相关链接 +## 浏览器兼容性 -- {{ domxref("Touch.screenY") }} -- {{ domxref("Touch.clientX") }} -- {{ domxref("Touch.pageX") }} +{{Compat}} diff --git a/files/zh-cn/web/api/touch/screeny/index.md b/files/zh-cn/web/api/touch/screeny/index.md index c6ae22d8347555..5d02ce3dc843c3 100644 --- a/files/zh-cn/web/api/touch/screeny/index.md +++ b/files/zh-cn/web/api/touch/screeny/index.md @@ -1,31 +1,26 @@ --- -title: Touch.screenY +title: Touch:screenY 属性 slug: Web/API/Touch/screenY +l10n: + sourceCommit: eb289996538d1242cd7eaa54cbd9e20da0cb908c --- -{{ ApiRef() }} +{{ APIRef("Touch Events") }} -### 概述 +返回触摸点相对于屏幕的 Y 坐标,不包括任何滚动偏移。 -返回触点相对于屏幕上边沿的 Y 坐标。不包含页面滚动的偏移量。 +## 值 -### 语法 +数字。 -```plain -var y = touchItem.screenY; -``` +## 示例 -### 返回值 +[Touch.screenX 示例](/zh-CN/docs/Web/API/Touch/screenX#示例)包含了此属性的使用示例。 -- `y` - - : 触点相对于屏幕上边沿的 Y 坐标。不包含页面滚动的偏移量。 +## 规范 -### 标准定义 +{{Specifications}} -[Touch Events Specification](http://www.w3.org/TR/touch-events/) +## 浏览器兼容性 -### 相关链接 - -- {{ domxref("Touch.screenX") }} -- {{ domxref("Touch.clientY") }} -- {{ domxref("Touch.pageY") }} +{{Compat}}