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触发点击事件的设备类型为键盘或手柄时，事件的SourceTool值为Unknown。 16 17相较于原有onClick接口，新增distanceThreshold参数作为点击事件移动阈值，当手指的移动距离超出所设置的点击手势移动阈值时，点击手势识别失败。 18对于点击时手指移动距离没有限制的场景，建议采用原有接口。若要求点击时手指在一定区域范围内，建议使用该接口。 19 20**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 21 22> **说明：** 23> 24> 从API version 12开始，在使用卡片能力时，存在以下限制： 25> 1. 手指按下超过800ms后，不能触发点击事件。 26> 2. 手指按下之后移动位移超过20px，不能触发点击事件。 27 28**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32**参数：** 33 34| 参数名 | 类型 | 必填 | 说明 | 35| ------ | --------------------------------- | ---- | -------------------- | 36| event | [ClickEvent](#clickevent对象说明) | 是 | 获得[ClickEvent](#clickevent对象说明)对象。 | 37| distanceThreshold | number | 是 | 点击事件移动阈值。当设置的值小于等于0时，会被转化为默认值。<br/>默认值：2^31-1<br/>**说明：**<br/>当手指的移动距离超出开发者预设的移动阈值时，点击识别失败。如果初始化为默认阈值时，手指移动超过组件热区范围，点击识别失败。 | 38 39## onClick 40 41onClick(event: (event: ClickEvent) => void): T 42 43点击动作触发该回调。 44 45触发点击事件的设备类型为键盘或手柄时，事件的SourceTool值为Unknown。 46 47**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 48 49> **说明：** 50> 51> 从API version 9开始，在使用卡片能力时，存在以下限制： 52> 1. 手指按下超过800ms后，不能触发点击事件。 53> 2. 手指按下之后移动位移超过20px，不能触发点击事件。 54 55**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 56 57**系统能力：** SystemCapability.ArkUI.ArkUI.Full 58 59**参数：** 60 61| 参数名 | 类型 | 必填 | 说明 | 62| ------ | --------------------------------- | ---- | -------------------- | 63| event | [ClickEvent](#clickevent对象说明) | 是 | 获得[ClickEvent](#clickevent对象说明)对象。 | 64 65**返回值：** 66 67| 类型 | 说明 | 68| -------- | -------- | 69| T | 返回当前组件。 | 70 71## ClickEvent对象说明 72 73继承于[BaseEvent](ts-gesture-customize-judge.md#baseevent对象说明8)。 74 75**系统能力：** SystemCapability.ArkUI.ArkUI.Full 76 77| 名称 | 类型 | 描述 | 78| ------------------- | ------------------------------------ | -------------------------------------------------------- | 79| x | number | 点击位置相对于被点击元素左边缘的X坐标。<br/>单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 80| y | number | 点击位置相对于被点击元素原始区域左上角的Y坐标。<br/>单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 81| target<sup>8+</sup> | [EventTarget](#eventtarget8对象说明) | 触发事件的元素对象显示区域。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 82| windowX<sup>10+</sup> | number | 点击位置相对于应用窗口左上角的X坐标。<br/>单位：vp<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 83| windowY<sup>10+</sup> | number | 点击位置相对于应用窗口左上角的Y坐标。<br/>单位：vp<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 84| displayX<sup>10+</sup> | number | 点击位置相对于应用屏幕左上角的X坐标。<br/>单位：vp<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 85| displayY<sup>10+</sup> | number | 点击位置相对于应用屏幕左上角的Y坐标。<br/>单位：vp<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 86| screenX<sup>(deprecated)</sup> | number | 点击位置相对于应用窗口左上角的X坐标。<br>从API version 10开始不再维护，建议使用windowX代替。 | 87| screenY<sup>(deprecated)</sup> | number | 点击位置相对于应用窗口左上角的Y坐标。<br>从API version 10开始不再维护，建议使用windowY代替。 | 88| preventDefault<sup>12+</sup> | () => void | 阻止默认事件。<br/> **说明：** 该接口仅支持部分组件使用，当前支持组件：RichEditor、Hyperlink。暂不支持异步调用和提供Modifier接口。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 89| targetDisplayId<sup>15+</sup> | number | 事件发生的屏幕ID。<br />**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 90| hand<sup>15+</sup> | [InteractionHand](./ts-gesture-settings.md#interactionhand枚举说明15) | 表示事件是由左手点击还是右手点击触发。<br />**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 91 92## EventTarget<sup>8+</sup>对象说明 93 94**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 95 96**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100| 名称 | 参数类型 | 描述 | 101| ---- | ------------------------- | ---------- | 102| area | [Area](ts-types.md#area8) | 目标元素的区域信息。 | 103| id<sup>15+</sup> | [string](ts-universal-attributes-component-id.md) | 开发者设置的节点id。 | 104 105## 示例 106 107该示例通过按钮设置了点击事件，点击按钮可获取点击事件的相关参数。 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
