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 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 29 30## TouchObject 31 32| Name | Type | Description | 33| ------- | ------------------------------------------- | ------------------------------------- | 34| type | [TouchType](ts-appendix-enums.md#touchtype) | Type of the touch event. | 35| id | number | Unique identifier of a finger. | 36| screenX | number | X coordinate of the touch point relative to the upper left corner of the application window. | 37| screenY | number | Y coordinate of the touch point relative to the upper left corner of the application window. | 38| x | number | X coordinate of the touch point relative to the upper left corner of the component being touched.| 39| y | number | Y coordinate of the touch point relative to the upper left corner of the component being touched.| 40 41## Example 42 43```ts 44// xxx.ets 45@Entry 46@Component 47struct TouchExample { 48 @State text: string = '' 49 @State eventType: string = '' 50 51 build() { 52 Column() { 53 Button('Touch').height(40).width(100) 54 .onTouch((event: TouchEvent) => { 55 if (event.type === TouchType.Down) { 56 this.eventType = 'Down' 57 } 58 if (event.type === TouchType.Up) { 59 this.eventType = 'Up' 60 } 61 if (event.type === TouchType.Move) { 62 this.eventType = 'Move' 63 } 64 this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' 65 + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' 66 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' 67 + event.target.area.width + '\nheight:' + event.target.area.height 68 }) 69 Button('Touch').height(50).width(200).margin(20) 70 .onTouch((event: TouchEvent) => { 71 if (event.type === TouchType.Down) { 72 this.eventType = 'Down' 73 } 74 if (event.type === TouchType.Up) { 75 this.eventType = 'Up' 76 } 77 if (event.type === TouchType.Move) { 78 this.eventType = 'Move' 79 } 80 this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' 81 + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' 82 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' 83 + event.target.area.width + '\nheight:' + event.target.area.height 84 }) 85 Text(this.text) 86 }.width('100%').padding(30) 87 } 88} 89``` 90 91 92
