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<[TouchObject](#touchobject)> | All finger information.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 41e41f4b71Sopenharmony_ci| changedTouches | Array<[TouchObject](#touchobject)> | 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<HistoricalPoint> 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<[HistoricalPoint](#historicalpoint10)>| 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 147