1# 触摸事件 2 3当手指在组件上按下、滑动、抬起时触发。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 事件 11 12| 名称 | 是否冒泡 | 功能描述 | 13| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | 14| onTouch(event: (event?: TouchEvent) => void) | 是 | 手指触摸动作触发该回调，event返回值见[TouchEvent](#touchevent对象说明)介绍。 | 15 16 17## TouchEvent对象说明 18 19| 名称 | 类型 | 描述 | 20| ------------------- | ---------------------------------------- | ------------ | 21| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | 22| touches | Array<[TouchObject](#touchobject对象说明)> | 全部手指信息。 | 23| changedTouches | Array<[TouchObject](#touchobject对象说明)> | 当前发生变化的手指信息。 | 24| stopPropagation | () => void | 阻塞事件冒泡。 | 25| timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | 26| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发事件的元素对象显示区域。 | 27| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 | 28 29 30## TouchObject对象说明 31 32| 名称 | 类型 | 描述 | 33| ------- | ------------------------------------------- | ------------------------------------- | 34| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | 35| id | number | 手指唯一标识符。 | 36| screenX | number | 触摸点相对于应用窗口左上角的X坐标。 | 37| screenY | number | 触摸点相对于应用窗口左上角的Y坐标。 | 38| x | number | 触摸点相对于被触摸元素左上角的X坐标。 | 39| y | number | 触摸点相对于被触摸元素左上角的Y坐标。 | 40 41## 示例 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
