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 15When the click event is triggered by a keyboard or gamepad, the value of **SourceTool** is **Unknown**. 16 17Compared 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. 18For 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. 19 20**Widget capability**: This API can be used in ArkTS widgets since API version 12. 21 22> **NOTE** 23> 24> Since API version 12, the following constraints apply when this API is used in service widgets: 25> 1. Click events cannot be triggered if the finger is pressed for more than 800 ms. 26> 2. Click events cannot be triggered if the finger moves more than 20 px after pressing down. 27 28**Atomic service API**: This API can be used in atomic services since API version 12. 29 30**System capability**: SystemCapability.ArkUI.ArkUI.Full 31 32**Parameters** 33 34| Name| Type | Mandatory| Description | 35| ------ | --------------------------------- | ---- | -------------------- | 36| event | [ClickEvent](#clickevent) | Yes | [ClickEvent](#clickevent) object.| 37| 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.| 38 39## onClick 40 41onClick(event: (event: ClickEvent) => void): T 42 43Called when a click event occurs. 44 45When the click event is triggered by a keyboard or gamepad, the value of **SourceTool** is **Unknown**. 46 47**Widget capability**: This API can be used in ArkTS widgets since API version 9. 48 49> **NOTE** 50> 51> Since API version 9, the following constraints apply when this API is used in service widgets: 52> 1. Click events cannot be triggered if the finger is pressed for more than 800 ms. 53> 2. Click events cannot be triggered if the finger moves more than 20 px after pressing down. 54 55**Atomic service API**: This API can be used in atomic services since API version 11. 56 57**System capability**: SystemCapability.ArkUI.ArkUI.Full 58 59**Parameters** 60 61| Name| Type | Mandatory| Description | 62| ------ | --------------------------------- | ---- | -------------------- | 63| event | [ClickEvent](#clickevent) | Yes | [ClickEvent](#clickevent) object.| 64 65**Return value** 66 67| Type| Description| 68| -------- | -------- | 69| T | Current component.| 70 71## ClickEvent 72 73Inherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent8). 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Full 76 77| Name | Type | Description | 78| ------------------- | ------------------------------------ | -------------------------------------------------------- | 79| 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. | 80| 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. | 81| 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. | 82| windowX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application window.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 83| windowY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application window.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 84| displayX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application screen.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 85| displayY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application screen.<br>Unit: vp<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 86| 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.| 87| 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.| 88| 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.| 89| targetDisplayId<sup>15+</sup> | number | ID of the screen where the event occurs.<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 90| hand<sup>15+</sup> | [InteractionHand](./ts-gesture-settings.md#interactionhand15) | Whether the event is triggered by a left-hand or right-hand tap.<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 91 92## EventTarget<sup>8+</sup> 93 94**Widget capability**: This API can be used in ArkTS widgets since API version 9. 95 96**Atomic service API**: This API can be used in atomic services since API version 11. 97 98**System capability**: SystemCapability.ArkUI.ArkUI.Full 99 100| Name | Type | Description | 101| ---- | ------------------------- | ---------- | 102| area | [Area](ts-types.md#area8) | Area information of the target element.| 103| id<sup>15+</sup> | [string](ts-universal-attributes-component-id.md) | Custom node ID.| 104 105## Example 106 107This 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. 108 109```ts 110// xxx.ets 111@Entry 112@Component 113struct ClickExample { 114 @State text: string = '' 115 116 build() { 117 Column() { 118 Row({ space: 20 }) { 119 Button('Click').width(100).height(40).id('click') 120 .onClick((event?: ClickEvent) => { 121 if(event){ 122 this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY 123 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 124 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 125 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp 126 + '\n id:'+ event.target.id + '\ntargetDisplayId:' + event.targetDisplayId; 127 } 128 }, 20) 129 Button('Click').width(200).height(50).id('click') 130 .onClick((event?: ClickEvent) => { 131 if(event){ 132 this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY 133 + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' 134 + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' 135 + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp 136 + '\n id:'+ event.target.id + '\ntargetDisplayId:' + event.targetDisplayId; 137 } 138 }, 20) 139 }.margin(20) 140 141 Text(this.text).margin(15) 142 }.width('100%') 143 } 144} 145``` 146 147
