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<sup>12+</sup> 10 11onClick(event: Callback\<ClickEvent>, distanceThreshold: number): T 12 13Called when a click event occurs. 14 15Compared to the original **onClick** API, this API has the **distanceThreshold** parameter that specifies the movement threshold for click events. If the finger's movement exceeds the set threshold, the gesture recognition will fail. 16For scenarios where there is no restriction on the finger movement distance during a click, the original API is recommended. If there is a requirement for the finger to stay within a certain area during the click, this API is recommended. 17 18**Widget capability**: This API can be used in ArkTS widgets since API version 12. 19 20**Atomic service API**: This API can be used in atomic services since API version 12. 21 22**System capability**: SystemCapability.ArkUI.ArkUI.Full 23 24**Parameters** 25 26| Name| Type | Mandatory| Description | 27| ------ | --------------------------------- | ---- | -------------------- | 28| event | [ClickEvent](#clickevent) | Yes | [ClickEvent](#clickevent) object.| 29| distanceThreshold | number | Yes | Movement threshold for click events. If the value specified is less than 0, it will be converted to the default value.<br>Default value: 2^31-1<br>**NOTE**<br>If the finger's movement exceeds the set threshold, the gesture recognition will fail. When the default value is used, if the finger moves beyond the touch target of the component, the gesture recognition will fail.| 30 31## onClick 32 33onClick(event: (event: ClickEvent) => void): T 34 35Called when a click event occurs. 36 37**Widget capability**: This API can be used in ArkTS widgets since API version 9. 38 39**Atomic service API**: This API can be used in atomic services since API version 11. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Full 42 43**Parameters** 44 45| Name| Type | Mandatory| Description | 46| ------ | --------------------------------- | ---- | -------------------- | 47| event | [ClickEvent](#clickevent) | Yes | [ClickEvent](#clickevent) object.| 48 49**Return value** 50 51| Type| Description| 52| -------- | -------- | 53| T | Current component.| 54 55## ClickEvent 56 57Inherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent). 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61| Name | Type | Description | 62| ------------------- | ------------------------------------ | -------------------------------------------------------- | 63| x | number | X coordinate of the click relative to the left edge of the clicked component.<br>Unit: vp<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 64| y | number | Y coordinate of the click relative to the upper left corner of the clicked component's original area.<br>Unit: vp<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 65| target<sup>8+</sup> | [EventTarget](#eventtarget8) | Display area of the object that triggers the event.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 66| windowX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application window.<br>Unit: vp<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 67| windowY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application window.<br>Unit: vp<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 68| displayX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application screen.<br>Unit: vp<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 69| displayY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application screen.<br>Unit: vp<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 70| 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.| 71| 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.| 72| preventDefault<sup>12+</sup> | () => void | Blocks the default event.<br> **NOTE**<br>This API can only be used by certain components; currently supported components include: **RichEditor**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 73 74## EventTarget<sup>8+</sup> 75 76**Widget capability**: This API can be used in ArkTS widgets since API version 9. 77 78**Atomic service API**: This API can be used in atomic services since API version 11. 79 80**System capability**: SystemCapability.ArkUI.ArkUI.Full 81 82| Name | Type | Description | 83| ---- | ------------------------- | ---------- | 84| area | [Area](ts-types.md#area8) | Area information of the target element.| 85 86## Example 87 88```ts 89// xxx.ets 90@Entry 91@Component 92struct ClickExample { 93 @State text: string = '' 94 95 build() { 96 Column() { 97 Row({ space: 20 }) { 98 Button('Click').width(100).height(40) 99 .onClick((event?: ClickEvent) => { 100 if(event){ 101 this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY 102 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 103 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 104 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; 105 } 106 }) 107 Button('Click').width(200).height(50) 108 .onClick((event?: ClickEvent) => { 109 if(event){ 110 this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY 111 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 112 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 113 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; 114 } 115 }) 116 }.margin(20) 117 118 Text(this.text).margin(15) 119 }.width('100%') 120 } 121} 122``` 123 124 125 126
