# Click Event >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions None ## Events

Name		Bubble Supported	Description
onClick(callback: (event?: ClickEvent) => void)		No	Called when a click event occurs. For details about the event parameters, see ClickEvent object.

- ClickEvent object

Name	Type	Description
screenX	number	X coordinate of the click relative to the left edge of the screen.
screenY	number	Y coordinate of the click relative to the upper edge of the screen.
x	number	X coordinate of the click relative to the left edge of the component being clicked.
y	number	Y coordinate of the click relative to the upper edge of the component being clicked.
target⁸⁺	EventTarget	Object of the element that is clicked.
timestamp	number	Timestamp of the event.

- EventTarget object⁸⁺

Name	Type	Description
area	Area	Area information of the target element.

- Area attributes⁸⁺

Name	Type	Description
width	Length	Width of the target element.
height	Length	Height of the target element.
pos	Position	Position of the upper left corner of the target element relative to that of the parent element.
globalPos	Position	Position of the upper left corner of the target element relative to that of the page.

- Position attributes⁸⁺

Name	Type	Description
x	Length	X-coordinate.
y	Length	Y-coordinate.

## Example ``` @Entry @Component struct ClickExample { @State text: string = '' build() { Column() { Button('Click').backgroundColor(0x2788D9).width(100).height(40) .onClick((event: ClickEvent) => { console.info(this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY + '\n x :' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n width:' + event.target.area.width + '\n height：' + event.target.area.height) }) Text(this.text).padding(15) }.height(350).width('100%').padding(10) } } ``` ![](figures/en-us_image_0000001237355087.gif)