-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
70 lines (56 loc) · 2.25 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
---
title: "TouchEvent: touches property"
short-title: touches
slug: Web/API/TouchEvent/touches
page-type: web-api-instance-property
browser-compat: api.TouchEvent.touches
---
{{ APIRef("Touch Events") }}
**`touches`** is a read-only {{ domxref("TouchList") }} listing
all the {{ domxref("Touch") }} objects for touch points that are currently in contact
with the touch surface, regardless of whether or not they've changed or what their
target element was at {{domxref("Element/touchstart_event", "touchstart")}} time.
You can think of it as how many separate fingers are able to be identified as touching
the screen.
> **Note:** Touches inside the array are not necessarily ordered by order of occurrences (the
> i-th element in the array being the i-th touch that happened). You cannot assume a specific order. To determine the order of occurrences of the touches, use the `touch` object IDs.
## Value
A {{ domxref("TouchList") }} listing all the {{ domxref("Touch") }} objects for touch points that are still in contact with the touch surface, regardless of whether or not they've changed or what their target element was at `touchstart`
time.
## Examples
This example illustrates the {{domxref("TouchEvent")}} object's
{{domxref("TouchEvent.touches")}} property. The {{domxref("TouchEvent.touches")}}
property is a {{domxref("TouchList")}} object and containing a list of
{{domxref("Touch")}} objects for every point of contact currently touching the surface.
In following code snippet, the {{domxref("Element/touchstart_event", "touchstart")}} event handler checks the length
of the {{domxref("TouchEvent.touches")}} list to determine the number of touch points
that were activated and then invokes different handlers depending on the number of touch
points.
```js
someElement.addEventListener(
"touchstart",
(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,
);
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}