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