1# Click Event 2 3A click event is triggered when a component is clicked. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9## onClick 10 11onClick(event: (event: ClickEvent) => void) 12 13Called when a click event occurs. 14 15**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name| Type | Mandatory| Description | 22| ------ | --------------------------------- | ---- | -------------------- | 23| event | [ClickEvent](#clickevent) | Yes | [ClickEvent](#clickevent) object.| 24 25## ClickEvent 26 27Since API version 9, this API is supported in ArkTS widgets. 28 29| Name | Type | Description | 30| ------------------- | ------------------------------------ | -------------------------------------------------------- | 31| x | number | X coordinate of the click relative to the upper left corner of the clicked component's original area.<br>Unit: vp | 32| y | number | Y coordinate of the click relative to the upper left corner of the clicked component's original area.<br>Unit: vp | 33| timestamp<sup>8+</sup> | number | Timestamp of the event. It is the interval between the time when the event is triggered and the time when the system starts.<br>Unit: ns| 34| target<sup>8+</sup> | [EventTarget](#eventtarget8) | Display area of the object that triggers the event.| 35| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.| 36| windowX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application window.<br>Unit: vp| 37| windowY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application window.<br>Unit: vp| 38| displayX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application screen.<br>Unit: vp| 39| displayY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application screen.<br>Unit: vp| 40| screenX<sup>(deprecated)</sup> | number | X coordinate of the click relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowX** instead. | 41| screenY<sup>(deprecated)</sup> | number | Y coordinate of the click relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowY** instead. | 42 43## EventTarget<sup>8+</sup> 44 45Since API version 9, this API is supported in ArkTS widgets. 46 47| Name | Type | Description | 48| ---- | ------------------------- | ---------- | 49| area | [Area](ts-types.md#area8) | Area information of the target element.| 50 51## Example 52 53```ts 54// xxx.ets 55@Entry 56@Component 57struct ClickExample { 58 @State text: string = '' 59 60 build() { 61 Column() { 62 Row({ space: 20 }) { 63 Button('Click').width(100).height(40) 64 .onClick((event?: ClickEvent) => { 65 if(event){ 66 this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY 67 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 68 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 69 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; 70 } 71 }) 72 Button('Click').width(200).height(50) 73 .onClick((event?: ClickEvent) => { 74 if(event){ 75 this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY 76 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 77 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 78 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; 79 } 80 }) 81 }.margin(20) 82 83 Text(this.text).margin(15) 84 }.width('100%') 85 } 86} 87``` 88 89 90 91
