1# Touch Event 2 3A touch event is triggered when a finger is pressed, slides, or is lifted from a component. 4 5> **NOTE** 6> 7> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Events 11 12| Name | Bubbling Supported| Description | 13| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | 14| onTouch(event: (event?: TouchEvent) => void) | Yes | Invoked when a touch event is triggered. For details about **event**, see [TouchEvent](#touchevent).| 15 16 17## TouchEvent 18 19| Name | Type | Description | 20| ------------------- | ---------------------------------------- | ------------ | 21| type | [TouchType](ts-appendix-enums.md#touchtype) | Type of the touch event. | 22| touches | Array<[TouchObject](#touchobject)> | All finger information. | 23| changedTouches | Array<[TouchObject](#touchobject)> | Finger information changed.| 24| stopPropagation | () => void | Stops the event from bubbling upwards or downwards.| 25| timestamp<sup>8+</sup> | number | Timestamp of the event. It is the interval between the time when the event is triggered and the time when the system starts, in nanoseconds.| 26| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the element that triggers the gesture event.| 27| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.| 28| getHistoricalPoints<sup>10+</sup> | Array<[HistoricalPoint](#historicalpoint10)>| 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 historical points).| 29 30 31## TouchObject 32 33| Name | Type | Description | 34| ------- | ------------------------------------------- | ------------------------------------- | 35| type | [TouchType](ts-appendix-enums.md#touchtype) | Type of the touch event. | 36| id | number | Unique identifier of a finger. | 37| x | number | X coordinate of the touch point relative to the upper left corner of the component being touched.| 38| y | number | Y coordinate of the touch point relative to the upper left corner of the component being touched.| 39| windowX<sup>10+</sup> | number | X coordinate of the touch point relative to the upper left corner of the application window. | 40| windowY<sup>10+</sup> | number | Y coordinate of the touch point relative to the upper left corner of the application window. | 41| displayX<sup>10+</sup> | number | X coordinate of the touch point relative to the upper left corner of the application screen. | 42| displayY<sup>10+</sup> | number | Y coordinate of the touch point relative to the upper left corner of the application screen. | 43| screenX<sup>(deprecated)</sup> | number | X coordinate of the touch point relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowX** instead. | 44| screenY<sup>(deprecated)</sup> | number | Y coordinate of the touch point relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowY** instead. | 45 46## HistoricalPoint<sup>10+</sup> 47 48| Name | Type | Description | 49| ----------- | ----------------------------------- | ----------------------------------------------------------------------------- | 50| touchObject | [TouchObject](#touchobject) | Basic information of the historical point. | 51| size | number | Size of the contact area between the finger and screen for the historical point.<br>Default value: **0** | 52| force | number | Touch force of the historical point.<br>Default value: **0**<br>Value range: [0,1]. A larger value indicates a greater touch force.<br>The support for this API varies by device. Currently, it is only available on tablets.| 53| 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, in nanoseconds. | 54## Example 55 56```ts 57// xxx.ets 58@Entry 59@Component 60struct TouchExample { 61 @State text: string = '' 62 @State eventType: string = '' 63 64 build() { 65 Column() { 66 Button('Touch').height(40).width(100) 67 .onTouch((event?: TouchEvent) => { 68 if(event){ 69 if (event.type === TouchType.Down) { 70 this.eventType = 'Down' 71 } 72 if (event.type === TouchType.Up) { 73 this.eventType = 'Up' 74 } 75 if (event.type === TouchType.Move) { 76 this.eventType = 'Move' 77 } 78 this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' 79 + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' 80 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' 81 + event.target.area.width + '\nheight:' + event.target.area.height 82 } 83 }) 84 Button('Touch').height(50).width(200).margin(20) 85 .onTouch((event?: TouchEvent) => { 86 if(event){ 87 if (event.type === TouchType.Down) { 88 this.eventType = 'Down' 89 } 90 if (event.type === TouchType.Up) { 91 this.eventType = 'Up' 92 } 93 if (event.type === TouchType.Move) { 94 this.eventType = 'Move' 95 } 96 this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' 97 + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' 98 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' 99 + event.target.area.width + '\nheight:' + event.target.area.height 100 } 101 }) 102 Text(this.text) 103 }.width('100%').padding(30) 104 } 105} 106``` 107 108 109
