• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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) =&gt; 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| screenX             | number                               | X coordinate of the click relative to the upper left corner of the application window.                     |
23| screenY             | number                               | Y coordinate of the click relative to the upper left corner of the application window.                     |
24| x                   | number                               | X coordinate of the click relative to the upper left corner of the component being clicked.                   |
25| y                   | number                               | Y coordinate of the click relative to the upper left corner of the component being clicked.                   |
26| 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.|
27| target<sup>8+</sup> | [EventTarget](#eventtarget8) | Display area of the object that triggers the event.|
28| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.|
29
30## EventTarget<sup>8+</sup>
31
32Since API version 9, this API is supported in ArkTS widgets.
33
34| Name  | Type                     | Description        |
35| ---- | ------------------------- | ---------- |
36| area | [Area](ts-types.md#area8) | Area information of the target element.|
37
38
39
40## Example
41
42```ts
43// xxx.ets
44@Entry
45@Component
46struct ClickExample {
47  @State text: string = ''
48
49  build() {
50    Column() {
51      Row({ space: 20 }) {
52        Button('Click').width(100).height(40)
53          .onClick((event: ClickEvent) => {
54            this.text = 'Click Point:' + '\n  screenX:' + event.screenX + '\n  screenY:' + event.screenY
55            + '\n  x:' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
56            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n  width:'
57            + event.target.area.width + '\n  height:' + event.target.area.height + '\ntimestamp' + event.timestamp;
58          })
59        Button('Click').width(200).height(50)
60          .onClick((event: ClickEvent) => {
61            this.text = 'Click Point:' + '\n  screenX:' + event.screenX + '\n  screenY:' + event.screenY
62            + '\n  x:' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
63            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n  width:'
64            + event.target.area.width + '\n  height:' + event.target.area.height + '\ntimestamp' + event.timestamp;
65          })
66      }.margin(20)
67
68      Text(this.text).margin(15)
69    }.width('100%')
70  }
71}
72```
73
74
75![en-us_image_0000001256858383](figures/en-us_image_0000001256858383.gif)
76