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