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 or equal to 0, it will be converted to the default value.<br>Default value: 2^31-1<br>**NOTE**<br>If the finger movement exceeds the preset movement threshold, the gesture recognition fails. If the default threshold is used during initialization and the finger moves beyond the component's touch target, the gesture recognition fails.| 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 are **RichEditor** and **Hyperlink**. Currently, asynchronous calls and Modifier APIs are not supported.<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 88This example shows how to configure a click event for a button. By doing so, you can obtain relevant parameters of the click event when the button is pressed. 89 90```ts 91// xxx.ets 92@Entry 93@Component 94struct ClickExample { 95 @State text: string = '' 96 97 build() { 98 Column() { 99 Row({ space: 20 }) { 100 Button('Click').width(100).height(40) 101 .onClick((event?: ClickEvent) => { 102 if(event){ 103 this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY 104 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 105 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 106 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; 107 } 108 }, 20) 109 Button('Click').width(200).height(50) 110 .onClick((event?: ClickEvent) => { 111 if(event){ 112 this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY 113 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 114 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 115 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; 116 } 117 }, 20) 118 }.margin(20) 119 120 Text(this.text).margin(15) 121 }.width('100%') 122 } 123} 124``` 125 126 127 128
