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 10## Events 11 12| Name | Bubbling Supported| Description | 13| ---------------------------------------- | ---- | --------------------------------- | 14| onClick(event: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about **event**, see **ClickEvent**.<br>Since API version 9, this API is supported in ArkTS widgets.| 15 16## ClickEvent 17 18Since API version 9, this API is supported in ArkTS widgets. 19 20| Name | Type | Description | 21| ------------------- | ------------------------------------ | -------------------------------------------------------- | 22| x | number | X coordinate of the click relative to the upper left corner of the component being clicked. | 23| y | number | Y coordinate of the click relative to the upper left corner of the component being clicked. | 24| 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, in nanoseconds.| 25| target<sup>8+</sup> | [EventTarget](#eventtarget8) | Display area of the object that triggers the event.| 26| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.| 27| windowX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application window.| 28| windowY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application window.| 29| displayX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application screen.| 30| displayY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application screen.| 31| 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. | 32| 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. | 33 34## EventTarget<sup>8+</sup> 35 36Since API version 9, this API is supported in ArkTS widgets. 37 38| Name | Type | Description | 39| ---- | ------------------------- | ---------- | 40| area | [Area](ts-types.md#area8) | Area information of the target element.| 41 42 43 44## Example 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
