1# 点击事件
2
3组件被点击时触发的事件。
4
5>  **说明：**
6>
7>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## onClick<sup>12+</sup>
10
11onClick(event: Callback\<ClickEvent>, distanceThreshold: number): T
12
13点击动作触发该回调。
14
15相较于原有onClick接口，新增distanceThreshold参数作为点击事件移动阈值，当手指的移动距离超出所设置的点击手势移动阈值时，点击手势识别失败。
16对于点击时手指移动距离没有限制的场景，建议采用原有接口。若要求点击时手指在一定区域范围内，建议使用该接口。
17
18**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
19
20**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
21
22**系统能力：** SystemCapability.ArkUI.ArkUI.Full
23
24**参数：**
25
26| 参数名 | 类型                              | 必填 | 说明                 |
27| ------ | --------------------------------- | ---- | -------------------- |
28| event  | [ClickEvent](#clickevent对象说明) | 是   | 获得[ClickEvent](#clickevent对象说明)对象。 |
29| distanceThreshold  | number | 是   | 点击事件移动阈值。当设置的值小于等于0时，会被转化为默认值。<br/>默认值：2^31-1<br/>**说明：**<br/>当手指的移动距离超出开发者预设的移动阈值时，点击识别失败。如果初始化为默认阈值时，手指移动超过组件热区范围，点击识别失败。 |
30
31## onClick
32
33onClick(event: (event: ClickEvent) => void): T
34
35点击动作触发该回调。
36
37**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
38
39**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
40
41**系统能力：** SystemCapability.ArkUI.ArkUI.Full
42
43**参数：**
44
45| 参数名 | 类型                              | 必填 | 说明                 |
46| ------ | --------------------------------- | ---- | -------------------- |
47| event  | [ClickEvent](#clickevent对象说明) | 是   | 获得[ClickEvent](#clickevent对象说明)对象。 |
48
49**返回值：**
50
51| 类型 | 说明 |
52| -------- | -------- |
53| T | 返回当前组件。 |
54
55## ClickEvent对象说明
56
57继承于[BaseEvent](ts-gesture-customize-judge.md#baseevent对象说明)。
58
59**系统能力：** SystemCapability.ArkUI.ArkUI.Full
60
61| 名称            | 类型                                 | 描述                                                     |
62| ------------------- | ------------------------------------ | -------------------------------------------------------- |
63| x                   | number                               | 点击位置相对于被点击元素左边缘的X坐标。<br/>单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。     |
64| y                   | number                               | 点击位置相对于被点击元素原始区域左上角的Y坐标。<br/>单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。          |
65| target<sup>8+</sup> | [EventTarget](#eventtarget8对象说明) | 触发事件的元素对象显示区域。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。  |
66| windowX<sup>10+</sup> | number                             | 点击位置相对于应用窗口左上角的X坐标。<br/>单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
67| windowY<sup>10+</sup> | number                             | 点击位置相对于应用窗口左上角的Y坐标。<br/>单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
68| displayX<sup>10+</sup> | number                            | 点击位置相对于应用屏幕左上角的X坐标。<br/>单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
69| displayY<sup>10+</sup> | number                            | 点击位置相对于应用屏幕左上角的Y坐标。<br/>单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
70| screenX<sup>(deprecated)</sup> | number                    | 点击位置相对于应用窗口左上角的X坐标。<br>从API Version 10开始不再维护，建议使用windowX代替。 |
71| screenY<sup>(deprecated)</sup> | number                    | 点击位置相对于应用窗口左上角的Y坐标。<br>从API Version 10开始不再维护，建议使用windowY代替。 |
72| preventDefault<sup>12+</sup>      | () => void | 阻止默认事件。<br/> **说明：**&nbsp;该接口仅支持部分组件使用，当前支持组件：RichEditor、Hyperlink。暂不支持异步调用和提供Modifier接口。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。|
73
74## EventTarget<sup>8+</sup>对象说明
75
76**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
77
78**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
79
80**系统能力：** SystemCapability.ArkUI.ArkUI.Full
81
82| 名称   | 参数类型                      | 描述         |
83| ---- | ------------------------- | ---------- |
84| area | [Area](ts-types.md#area8) | 目标元素的区域信息。 |
85
86## 示例
87
88该示例通过按钮设置了点击事件，点击按钮可获取点击事件的相关参数。
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![zh-cn_image_0000001210353788](figures/zh-cn_image_0000001210353788.gif)
128