From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/touchevent/changedtouches/index.html | 34 +++++ files/zh-cn/web/api/touchevent/index.html | 143 +++++++++++++++++++++ .../web/api/touchevent/targettouches/index.html | 60 +++++++++ files/zh-cn/web/api/touchevent/touches/index.html | 75 +++++++++++ 4 files changed, 312 insertions(+) create mode 100644 files/zh-cn/web/api/touchevent/changedtouches/index.html create mode 100644 files/zh-cn/web/api/touchevent/index.html create mode 100644 files/zh-cn/web/api/touchevent/targettouches/index.html create mode 100644 files/zh-cn/web/api/touchevent/touches/index.html (limited to 'files/zh-cn/web/api/touchevent') diff --git a/files/zh-cn/web/api/touchevent/changedtouches/index.html b/files/zh-cn/web/api/touchevent/changedtouches/index.html new file mode 100644 index 0000000000..a286e3a674 --- /dev/null +++ b/files/zh-cn/web/api/touchevent/changedtouches/index.html @@ -0,0 +1,34 @@ +--- +title: TouchEvent.changedTouches +slug: Web/API/TouchEvent/changedTouches +translation_of: Web/API/TouchEvent/changedTouches +--- +

{{ ApiRef() }}

+ +

概述

+ +

这个 {{ domxref("TouchList") }} 对象列出了和这个触摸事件对应的 {{ domxref("Touch") }} 对象。

+ + + +

语法

+ +
var touches = touchEvent.changedTouches;
+
+ +

这是一个只读属性。

+ +

返回值

+ +
+
touches
+
列出对应这个触摸事件的 {{ domxref("Touch") }} 对象的 {{ domxref("TouchList") }} 对象。
+
+ +

标准定义

+ +

Touch Events Specification

diff --git a/files/zh-cn/web/api/touchevent/index.html b/files/zh-cn/web/api/touchevent/index.html new file mode 100644 index 0000000000..7ca4bb4235 --- /dev/null +++ b/files/zh-cn/web/api/touchevent/index.html @@ -0,0 +1,143 @@ +--- +title: TouchEvent +slug: Web/API/TouchEvent +tags: + - API + - DOM + - 参考 + - 接口 + - 触摸 +translation_of: Web/API/TouchEvent +--- +

{{ ApiRef() }}

+ +

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

+ +

每 个 {{ domxref("Touch") }} 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 {{ domxref("element") }} 描述。 {{ domxref("TouchList") }} 对象代表多个触点的一个列表.

+ +

构造函数

+ +
+
{{ domxref("TouchEvent.TouchEvent", "TouchEvent()")}}
+
创建一个{{ domxref("TouchEvent") }}对象。
+
+ +

属性列表

+ +

{{ domxref("TouchEvent") }}的属性继承了 {{domxref("UIEvent")}} 和 {{domxref("Event")}}。

+ +
+
{{ domxref("event.altKey", "TouchEvent.altKey") }} {{readonlyInline}}
+
布尔值，指明触摸事件触发时，键盘 alt 键是否被按下。
+
{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}
+
一个 {{ domxref("TouchList") }} 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 {{ domxref("Touch") }} 对象。
+
{{ domxref("event.ctrlKey", "TouchEvent.ctrlKey") }} {{readonlyInline}}
+
布尔值，指明触摸事件触发时，键盘 ctrl 键是否被按下。
+
{{ domxref("event.metaKey", "TouchEvent.metaKey") }} {{readonlyInline}}
+
布尔值，指明触摸事件触发时，键盘 meta 键 （Wikipedia - meta Key）是否被按下。
+
{{ domxref("event.shiftKey", "TouchEvent.shiftKey") }} {{readonlyInline}}
+
布尔值，指明触摸事件触发时，键盘 shift 键是否被按下。
+
{{ domxref("TouchEvent.targetTouches") }} {{readonlyInline}}
+
一个 {{ domxref("TouchList") }} 对象，是包含了如下触点的 {{ domxref("Touch") }} 对象：触摸起始于当前事件的目标 {{ domxref("element") }} 上，并且仍然没有离开触摸平面的触点。
+
{{ domxref("TouchEvent.touches") }} {{readonlyInline}}
+
一 个 {{ domxref("TouchList") }} 对象，包含了所有当前接触触摸平面的触点的 {{ domxref("Touch") }} 对象，无论它们的起始于哪个 {{ domxref("element") }} 上，也无论它们状态是否发生了变化。
+
+ +

触摸事件的类型

+ +

为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 {{ domxref("event.type", "TouchEvent.type") }} 属性来确定当前事件属于哪种类型

+ +
注意: 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 {{ domxref("event.preventDefault()") }} 来阻止鼠标事件被触发。
+ +

{{domxref("Element/touchstart_event", "touchstart")}}

+ +

当用户在触摸平面上放置了一个触点时触发。事件的目标 {{ domxref("element")}} 将是触点位置上的那个目标 {{ domxref("element") }}

+ +

{{domxref("Element/touchend_event", "touchend")}}

+ +

当一个触点被用户从触摸平面上移除（即用户的一个手指或手写笔离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。

+ +

事件的目标 {{ domxref("element") }} 与触发 touchstart 事件的目标 {{ domxref("element") }} 相同，即使 touchend 事件触发时，触点已经移出了该 {{ domxref("element") }} 。

+ +

已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 {{ domxref("TouchList") }} 中找到。

+ +

{{domxref("Element/touchmove_event", "touchmove")}}

+ +

当用户在触摸平面上移动触点时触发。事件的目标 {{ domxref("element") }} 和触发 touchstart 事件的目标 {{ domxref("element") }} 相同，即使当 touchmove 事件触发时，触点已经移出了该 {{ domxref("element") }} 。

+ +

当触点的半径、旋转角度以及压力大小发生变化时，也将触发此事件。

+ +
注意: 不同浏览器上 touchmove 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率。
+ +

{{domxref("Element/touchcancel_event", "touchcancel")}}

+ +

当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：

+ + + +

与 addEventListener() 和 preventDefault() 一起使用

+ +

很值得注意的是，在很多情况下，触摸事件和鼠标事件会一起触发（以使非触摸专用的代码仍然可以与用户交互）。如果你要使用触摸事件，你可以使用 {{domxref("Event.preventDefault","preventDefault()")}} 来取消鼠标事件。

+ +

但 Chrome 是例外，从版本56（桌面版、安卓版和安卓 webview）开始，Chrome 中 {{domxref("Element/touchstart_event", "touchstart")}} and {{domxref("Element/touchmove_event", "touchmove")}} 的默认值就是 true，没有必要调用 {{domxref("Event.preventDefault","preventDefault()")}}。如果要重写这个行为，简单地将 passive 设置成 false 就行。这样设置可以阻止监听器在用户滚动时停止页面渲染。Google Developer 有一个简单的演示。

+ +

全局事件处理

+ +

{{SeeCompatTable}}

+ +
+
{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}
+
使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理{{event("touchstart")}} 事件。
+
{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}
+
使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理 {{event("touchend")}} 事件。
+
{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}
+
使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理 {{event("touchmove")}} 事件。
+
{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}
+
使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理 {{event("touchcancel")}} 事件。
+
+ +

实例

+ +

请看 example on the main Touch events article.

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}{{Spec2('Touch Events 2')}}Added ontouchstart, ontouchend, ontouchmove, ontouchend global attribute handlers
{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}{{Spec2('Touch Events')}}Initial definition.
+ +

浏览器兼容性

+ +

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

+ +
+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/touchevent/targettouches/index.html b/files/zh-cn/web/api/touchevent/targettouches/index.html new file mode 100644 index 0000000000..5b09634380 --- /dev/null +++ b/files/zh-cn/web/api/touchevent/targettouches/index.html @@ -0,0 +1,60 @@ +--- +title: TouchEvent.targetTouches +slug: Web/API/TouchEvent/targetTouches +translation_of: Web/API/TouchEvent/targetTouches +--- +

{{ APIRef("Touch Events") }}

+ +

targetTouches 是一个只读的 {{ domxref("TouchList") }} 列表，包含仍与触摸面接触的所有触摸点的 {{ domxref("Touch") }} 对象。{{event("touchstart")}}事件触发在哪个{{ domxref("element") }}内，它就是当前目标元素。

+ +

语法

+ +
var touches = touchEvent.targetTouches;
+
+ +

返回值

+ +
+
touches
+
一个 {{ domxref("TouchList") }}，包含仍与触摸面接触的所有触摸点的 {{ domxref("Touch") }} 对象，{{event("touchstart")}}事件触发在哪个{{ domxref("element") }}内，它就是当前目标元素。
+
+ +

例子

+ +

本例阐述了 {{domxref("TouchEvent")}} 对象的 {{domxref("TouchEvent.targetTouches")}} 属性。{{domxref("TouchEvent.targetTouches")}} 属性也是一个 {{domxref("TouchList")}}，其中包含的触摸点起始于触摸事件当前的目标元素，并且此刻正在触摸屏幕。所以，targetTouches 元素是 touches 的真子集。

+ +

下面代码段中的函数比较了 touches 列表和 targetTouches 列表的长度，返回值表示他们是否相等。

+ +
function touches_in_target(ev) {
+  // Return true if all of the touches are within the target element;
+  // otherwise return false.
+  return (ev.touches.length == ev.targetTouches.length ? true : false);
+}
+ +

规格

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2','#widl-TouchEvent-targetTouches')}}{{Spec2('Touch Events 2')}}Non-stable version.
{{SpecName('Touch Events','#widl-TouchEvent-targetTouches')}}{{Spec2('Touch Events')}}Initial definition.
+ + + +

浏览器兼容性

+ +

{{Compat("api.TouchEvent.targetTouches")}}

diff --git a/files/zh-cn/web/api/touchevent/touches/index.html b/files/zh-cn/web/api/touchevent/touches/index.html new file mode 100644 index 0000000000..e5c9672b3d --- /dev/null +++ b/files/zh-cn/web/api/touchevent/touches/index.html @@ -0,0 +1,75 @@ +--- +title: TouchEvent.touches +slug: Web/API/TouchEvent/touches +tags: + - API + - DOM + - DOM Reference + - touch +translation_of: Web/API/TouchEvent/touches +--- +

{{ APIRef("Touch Events") }}

+ +

概要

+ +

一个 {{ domxref("TouchList") }}，其会列出所有当前在与触摸表面接触的  {{ domxref("Touch") }} 对象，不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。

+ +

此属性是 {{readonlyInline}}。

+ +

语法

+ +
var touches = touchEvent.touches;
+
+ +

返回值

+ +
+
touches
+
一个 {{ domxref("TouchList") }}，其会列出所有当前在与触摸表面接触的  {{ domxref("Touch") }} 对象，不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。
+
+ +

示例

+ +

此示例说明 {{domxref("TouchEvent")}} 对象的 {{domxref("TouchEvent.touches")}} 属性。该{{domxref("TouchEvent.touches")}} 属性是一个 {{domxref("TouchList")}} 对象，并包含 {{domxref("Touch")}} 当前接触表面的每个接触点的对象列表。

+ +

在下面的代码片段中，{{event("touchstart")}} 事件处理程序会检查 {{domxref("TouchEvent.touches")}} 列表的长度，以确定激活的触摸点的数量，然后根据触摸点的数量调用不同的处理程序。

+ +
someElement.addEventListener('touchstart', function(e) {
+   // Invoke the appropriate handler depending on the
+   // number of touch points.
+   switch (e.touches.length) {
+     case 1: handle_one_touch(e); break;
+     case 2: handle_two_touches(e); break;
+     case 3: handle_three_touches(e); break;
+     default: console.log("Not supported"); break;
+   }
+ }, false);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态评价
{{SpecName('Touch Events 2','#widl-TouchEvent-touches')}}{{Spec2('Touch Events 2')}}不稳定版
{{SpecName('Touch Events','#widl-TouchEvent-touches')}}{{Spec2('Touch Events')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("api.TouchEvent.touches")}}

-- cgit v1.2.3-54-g00ecf