1e41f4b71Sopenharmony_ci# Touch Event
2e41f4b71Sopenharmony_ci
3e41f4b71Sopenharmony_ciA touch event is triggered when a finger is pressed against, swipes on, or is lifted from a component.
4e41f4b71Sopenharmony_ci
5e41f4b71Sopenharmony_ci> **NOTE**
6e41f4b71Sopenharmony_ci>
7e41f4b71Sopenharmony_ci> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8e41f4b71Sopenharmony_ci
9e41f4b71Sopenharmony_ci## onTouch
10e41f4b71Sopenharmony_ci
11e41f4b71Sopenharmony_cionTouch(event: (event: TouchEvent) => void): T
12e41f4b71Sopenharmony_ci
13e41f4b71Sopenharmony_ciInvoked when a touch event is triggered.
14e41f4b71Sopenharmony_ci
15e41f4b71Sopenharmony_ci**Atomic service API**: This API can be used in atomic services since API version 11.
16e41f4b71Sopenharmony_ci
17e41f4b71Sopenharmony_ci**System capability**: SystemCapability.ArkUI.ArkUI.Full
18e41f4b71Sopenharmony_ci
19e41f4b71Sopenharmony_ci**Parameters**
20e41f4b71Sopenharmony_ci
21e41f4b71Sopenharmony_ci| Name| Type                             | Mandatory| Description                |
22e41f4b71Sopenharmony_ci| ------ | --------------------------------- | ---- | -------------------- |
23e41f4b71Sopenharmony_ci| event  | [TouchEvent](#touchevent) | Yes  | **TouchEvent** object.|
24e41f4b71Sopenharmony_ci
25e41f4b71Sopenharmony_ci**Return value**
26e41f4b71Sopenharmony_ci
27e41f4b71Sopenharmony_ci| Type| Description|
28e41f4b71Sopenharmony_ci| -------- | -------- |
29e41f4b71Sopenharmony_ci| T | Current component.|
30e41f4b71Sopenharmony_ci
31e41f4b71Sopenharmony_ci## TouchEvent
32e41f4b71Sopenharmony_ci
33e41f4b71Sopenharmony_ciInherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent).
34e41f4b71Sopenharmony_ci
35e41f4b71Sopenharmony_ci**System capability**: SystemCapability.ArkUI.ArkUI.Full
36e41f4b71Sopenharmony_ci
37e41f4b71Sopenharmony_ci| Name               | Type                                      | Description          |
38e41f4b71Sopenharmony_ci| ------------------- | ---------------------------------------- | ------------ |
39e41f4b71Sopenharmony_ci| type                | [TouchType](ts-appendix-enums.md#touchtype)      | Type of the touch event.<br>**Atomic service API**: This API can be used in atomic services since API version 11.    |
40e41f4b71Sopenharmony_ci| touches             | Array&lt;[TouchObject](#touchobject)&gt; | All finger information.<br>**Atomic service API**: This API can be used in atomic services since API version 11.     |
41e41f4b71Sopenharmony_ci| changedTouches      | Array&lt;[TouchObject](#touchobject)&gt; | Finger information changed.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
42e41f4b71Sopenharmony_ci| stopPropagation      | () => void | Stops the event from bubbling upwards or downwards.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
43e41f4b71Sopenharmony_ci| preventDefault<sup>12+</sup>      | () => void | Blocks the default event.<br> **NOTE**<br>This API can only be used by certain components; currently there are no supported components.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
44e41f4b71Sopenharmony_ci
45e41f4b71Sopenharmony_ci
46e41f4b71Sopenharmony_ci### getHistoricalPoints<sup>10+</sup>
47e41f4b71Sopenharmony_ci
48e41f4b71Sopenharmony_cigetHistoricalPoints(): Array&lt;HistoricalPoint&gt;
49e41f4b71Sopenharmony_ci
50e41f4b71Sopenharmony_ciObtains all historical points of the current frame. The touch event frequency of a frame varies by device, and all touch events of the current frame are referred to as its historical points. This API can be called only in [TouchEvent](#touchevent). You can use this API to obtain the historical points of the current frame when [onTouch](#ontouch) is invoked. [onTouch](#ontouch) is invoked only once for a frame. If the value of [TouchEvent](#touchevent) received by the current frame is greater than 1, the last point of the frame is returned through [onTouch](#ontouch). The remaining points are regarded as historical points.
51e41f4b71Sopenharmony_ci
52e41f4b71Sopenharmony_ci**Atomic service API**: This API can be used in atomic services since API version 11.
53e41f4b71Sopenharmony_ci
54e41f4b71Sopenharmony_ci**System capability**: SystemCapability.ArkUI.ArkUI.Full
55e41f4b71Sopenharmony_ci
56e41f4b71Sopenharmony_ci**Return value**
57e41f4b71Sopenharmony_ci
58e41f4b71Sopenharmony_ci| Type    | Description                     |
59e41f4b71Sopenharmony_ci| ------ | ----------------------- |
60e41f4b71Sopenharmony_ci| Array&lt;[HistoricalPoint](#historicalpoint10)&gt;| Array of historical points.|
61e41f4b71Sopenharmony_ci
62e41f4b71Sopenharmony_ci
63e41f4b71Sopenharmony_ci## TouchObject
64e41f4b71Sopenharmony_ci
65e41f4b71Sopenharmony_ci**System capability**: SystemCapability.ArkUI.ArkUI.Full
66e41f4b71Sopenharmony_ci
67e41f4b71Sopenharmony_ci| Name   | Type                                       | Description                                 |
68e41f4b71Sopenharmony_ci| ------- | ------------------------------------------- | ------------------------------------- |
69e41f4b71Sopenharmony_ci| type    | [TouchType](ts-appendix-enums.md#touchtype) | Type of the touch event.<br>**Atomic service API**: This API can be used in atomic services since API version 11.                     |
70e41f4b71Sopenharmony_ci| id      | number                                      | Unique identifier of a finger.<br>**Atomic service API**: This API can be used in atomic services since API version 11.                     |
71e41f4b71Sopenharmony_ci| x       | number                                      | X coordinate of the touch point relative to the upper left corner of the event responding component.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
72e41f4b71Sopenharmony_ci| y       | number                                      | Y coordinate of the touch point relative to the upper left corner of the event responding component.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
73e41f4b71Sopenharmony_ci| windowX<sup>10+</sup>  | number                       | X coordinate of the touch point relative to the upper left corner of the application window.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.  |
74e41f4b71Sopenharmony_ci| windowY<sup>10+</sup>  | number                       | Y coordinate of the touch point relative to the upper left corner of the application window.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.  |
75e41f4b71Sopenharmony_ci| displayX<sup>10+</sup> | number                       | X coordinate of the touch point relative to the upper left corner of the application screen.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.  |
76e41f4b71Sopenharmony_ci| displayY<sup>10+</sup> | number                       | Y coordinate of the touch point relative to the upper left corner of the application screen.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.  |
77e41f4b71Sopenharmony_ci| screenX<sup>(deprecated)</sup> | number               | X coordinate of the touch point relative to the upper left corner of the application window.<br>Unit: vp<br>This API is deprecated since API version 10. You are advised to use **windowX** instead.  |
78e41f4b71Sopenharmony_ci| screenY<sup>(deprecated)</sup> | number               | Y coordinate of the touch point relative to the upper left corner of the application window.<br>Unit: vp<br>This API is deprecated since API version 10. You are advised to use **windowY** instead.  |
79e41f4b71Sopenharmony_ci
80e41f4b71Sopenharmony_ci## HistoricalPoint<sup>10+</sup>
81e41f4b71Sopenharmony_ci
82e41f4b71Sopenharmony_ci**Atomic service API**: This API can be used in atomic services since API version 11.
83e41f4b71Sopenharmony_ci
84e41f4b71Sopenharmony_ci**System capability**: SystemCapability.ArkUI.ArkUI.Full
85e41f4b71Sopenharmony_ci
86e41f4b71Sopenharmony_ci| Name        | Type                                | Description                                                                        |
87e41f4b71Sopenharmony_ci| ----------- | ----------------------------------- | ----------------------------------------------------------------------------- |
88e41f4b71Sopenharmony_ci| touchObject | [TouchObject](#touchobject)  | Basic information of the historical point.                                                  |
89e41f4b71Sopenharmony_ci| size        | number                              | Size of the contact area between the finger and screen for the historical point.<br>Default value: **0**                                    |
90e41f4b71Sopenharmony_ci| force       | number                              | Touch force of the historical point.<br>Default value: **0**<br>Value range: [0, 65535). The greater the pressure, the larger the value.|
91e41f4b71Sopenharmony_ci| timestamp   | number                              | Timestamp of the historical point. It is the interval between the time when the event is triggered and the time when the system starts.<br>Unit: ns          |
92e41f4b71Sopenharmony_ci## Example
93e41f4b71Sopenharmony_ci
94e41f4b71Sopenharmony_ci```ts
95e41f4b71Sopenharmony_ci// xxx.ets
96e41f4b71Sopenharmony_ci@Entry
97e41f4b71Sopenharmony_ci@Component
98e41f4b71Sopenharmony_cistruct TouchExample {
99e41f4b71Sopenharmony_ci  @State text: string = ''
100e41f4b71Sopenharmony_ci  @State eventType: string = ''
101e41f4b71Sopenharmony_ci
102e41f4b71Sopenharmony_ci  build() {
103e41f4b71Sopenharmony_ci    Column() {
104e41f4b71Sopenharmony_ci      Button('Touch').height(40).width(100)
105e41f4b71Sopenharmony_ci        .onTouch((event?: TouchEvent) => {
106e41f4b71Sopenharmony_ci          if(event){
107e41f4b71Sopenharmony_ci            if (event.type === TouchType.Down) {
108e41f4b71Sopenharmony_ci              this.eventType = 'Down'
109e41f4b71Sopenharmony_ci            }
110e41f4b71Sopenharmony_ci            if (event.type === TouchType.Up) {
111e41f4b71Sopenharmony_ci              this.eventType = 'Up'
112e41f4b71Sopenharmony_ci            }
113e41f4b71Sopenharmony_ci            if (event.type === TouchType.Move) {
114e41f4b71Sopenharmony_ci              this.eventType = 'Move'
115e41f4b71Sopenharmony_ci            }
116e41f4b71Sopenharmony_ci            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
117e41f4b71Sopenharmony_ci            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
118e41f4b71Sopenharmony_ci            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
119e41f4b71Sopenharmony_ci            + event.target.area.width + '\nheight:' + event.target.area.height
120e41f4b71Sopenharmony_ci          }
121e41f4b71Sopenharmony_ci        })
122e41f4b71Sopenharmony_ci      Button('Touch').height(50).width(200).margin(20)
123e41f4b71Sopenharmony_ci        .onTouch((event?: TouchEvent) => {
124e41f4b71Sopenharmony_ci          if(event){
125e41f4b71Sopenharmony_ci            if (event.type === TouchType.Down) {
126e41f4b71Sopenharmony_ci              this.eventType = 'Down'
127e41f4b71Sopenharmony_ci            }
128e41f4b71Sopenharmony_ci            if (event.type === TouchType.Up) {
129e41f4b71Sopenharmony_ci              this.eventType = 'Up'
130e41f4b71Sopenharmony_ci            }
131e41f4b71Sopenharmony_ci            if (event.type === TouchType.Move) {
132e41f4b71Sopenharmony_ci              this.eventType = 'Move'
133e41f4b71Sopenharmony_ci            }
134e41f4b71Sopenharmony_ci            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
135e41f4b71Sopenharmony_ci            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
136e41f4b71Sopenharmony_ci            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
137e41f4b71Sopenharmony_ci            + event.target.area.width + '\nheight:' + event.target.area.height
138e41f4b71Sopenharmony_ci          }
139e41f4b71Sopenharmony_ci        })
140e41f4b71Sopenharmony_ci      Text(this.text)
141e41f4b71Sopenharmony_ci    }.width('100%').padding(30)
142e41f4b71Sopenharmony_ci  }
143e41f4b71Sopenharmony_ci}
144e41f4b71Sopenharmony_ci```
145e41f4b71Sopenharmony_ci
146e41f4b71Sopenharmony_ci![en-us_image_0000001209874754](figures/en-us_image_0000001209874754.gif)
147