1# 点击事件 2 3组件被点击时触发的事件。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 事件 11 12| 名称 | 支持冒泡 | 功能描述 | 13| ---------------------------------------- | ---- | --------------------------------- | 14| onClick(event: (event?: ClickEvent) => void) | 否 | 点击动作触发该回调，event返回值见ClickEvent对象说明。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 15 16## ClickEvent对象说明 17 18从API version 9开始，该接口支持在ArkTS卡片中使用。 19 20| 名称 | 类型 | 描述 | 21| ------------------- | ------------------------------------ | -------------------------------------------------------- | 22| screenX | number | 点击位置相对于应用窗口左上角的X坐标。 | 23| screenY | number | 点击位置相对于应用窗口左上角的Y坐标。 | 24| x | number | 点击位置相对于被点击元素左上角的X坐标。 | 25| y | number | 点击位置相对于被点击元素左上角的Y坐标。 | 26| timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | 27| target<sup>8+</sup> | [EventTarget](#eventtarget8对象说明) | 触发事件的元素对象显示区域。 | 28| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 | 29 30## EventTarget<sup>8+</sup>对象说明 31 32从API version 9开始，该接口支持在ArkTS卡片中使用。 33 34| 名称 | 参数类型 | 描述 | 35| ---- | ------------------------- | ---------- | 36| area | [Area](ts-types.md#area8) | 目标元素的区域信息。 | 37 38 39 40## 示例 41 42```ts 43// xxx.ets 44@Entry 45@Component 46struct ClickExample { 47 @State text: string = '' 48 49 build() { 50 Column() { 51 Row({ space: 20 }) { 52 Button('Click').width(100).height(40) 53 .onClick((event: ClickEvent) => { 54 this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY 55 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 56 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 57 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; 58 }) 59 Button('Click').width(200).height(50) 60 .onClick((event: ClickEvent) => { 61 this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY 62 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 63 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 64 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; 65 }) 66 }.margin(20) 67 68 Text(this.text).margin(15) 69 }.width('100%') 70 } 71} 72``` 73 74 75 76
