1# 悬浮事件 2 3光标滑动，或者手写笔在屏幕上悬浮移动扫过组件时触发。 4 5> **说明：** 6> 7> - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> - 目前支持通过外接鼠标、手写笔以及触控板触发。 9 10## onHover 11 12onHover(event: (isHover: boolean, event: HoverEvent) => void): T 13 14鼠标或手写笔进入或退出组件时触发hover事件。 15 16**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 17 18**系统能力：** SystemCapability.ArkUI.ArkUI.Full 19 20**参数：** 21 22| 参数名 | 类型 | 必填 | 说明 | 23| ------------------- | ----------------------------------- | ---- | ------------------------------------------------------------ | 24| isHover | boolean | 是 | 表示鼠标或手写笔是否悬浮在组件上，鼠标或手写笔进入组件时为true, 离开组件时为false。 | 25| event<sup>11+</sup> | [HoverEvent](#hoverevent10对象说明) | 是 | 设置阻塞事件冒泡属性。 | 26 27**返回值：** 28 29| 类型 | 说明 | 30| -------- | -------- | 31| T | 返回当前组件。 | 32 33## onHoverMove<sup>15+</sup> 34 35onHoverMove(event: Callback<HoverEvent>): T 36 37手写笔悬浮于组件上方时触发悬浮移动事件。 38 39**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 40 41**系统能力：** SystemCapability.ArkUI.ArkUI.Full 42 43**参数：** 44 45| 参数名 | 类型 | 必填 | 说明 | 46| ------------------- | ----------------------------------- | ---- | ------------------------------------------------------------ | 47| event | [HoverEvent](#hoverevent10对象说明) | 是 |设置阻塞事件冒泡属性，以及获取鼠标或手写笔悬浮的位置坐标。 | 48 49**返回值：** 50 51| 类型 | 说明 | 52| -------- | -------- | 53| T | 返回当前组件。 | 54 55## HoverEvent<sup>10+</sup>对象说明 56 57继承于[BaseEvent](ts-gesture-customize-judge.md#baseevent对象说明8)。 58 59**系统能力：** SystemCapability.ArkUI.ArkUI.Full 60 61| 名称 | 类型 | 只读 | 可选 | 说明 | 62| --------------- | ---------- | ----- | ----- | -------------------- | 63| x<sup>15+</sup> |number|否|是|手写笔位置相对于当前组件左上角的x轴坐标。<br> **原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。| 64| y<sup>15+</sup> |number|否|是|手写笔位置相对于当前组件左上角的y轴坐标。<br> **原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。| 65| windowX<sup>15+</sup> |number|否|是|手写笔位置相对于应用窗口左上角的x轴坐标。<br> **原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。| 66| windowY<sup>15+</sup> |number|否|是|手写笔位置相对于应用窗口左上角的y轴坐标。<br> **原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。| 67| displayX<sup>15+</sup> |number|否|是|手写笔位置相对于应用屏幕左上角的x轴坐标。<br> **原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。| 68| displayY<sup>15+</sup> |number|否|是|手写笔位置相对于应用屏幕左上角的y轴坐标。<br> **原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。| 69| stopPropagation | () => void |否|否| 阻塞事件冒泡。 <br> **原子化服务API：** 从API version 10开始，该接口支持在原子化服务中使用。| 70 71## 示例 72 73### 示例1（使用onHover） 74 75该示例通过按钮设置了悬浮事件 `onHover()`，鼠标悬浮可触发onHover事件修改按钮颜色。 76 77```ts 78// xxx.ets 79@Entry 80@Component 81struct HoverEventExample { 82 @State hoverText: string = 'no hover'; 83 @State color: Color = Color.Blue; 84 85 build() { 86 Column({ space: 20 }) { 87 Button(this.hoverText) 88 .width(180).height(80) 89 .backgroundColor(this.color) 90 .onHover((isHover: boolean, event: HoverEvent) => { 91 // 通过onHover事件动态修改按钮在是否有鼠标或手写笔悬浮时的文本内容与背景颜色 92 // 通过event.sourceTool区分设备是鼠标还是手写笔 93 if (isHover) { 94 if (event.sourceTool == SourceTool.Pen) { 95 this.hoverText = 'pen hover'; 96 this.color = Color.Pink; 97 } else if (event.sourceTool == SourceTool.MOUSE) { 98 this.hoverText = 'mouse hover'; 99 this.color = Color.Red; 100 } 101 } else { 102 this.hoverText = 'no hover'; 103 this.color = Color.Blue; 104 } 105 }) 106 }.padding({ top: 30 }).width('100%') 107 } 108} 109``` 110 111示意图： 112 113未悬浮时的文本内容与背景颜色： 114 115  116 117手写笔悬浮时改变文本内容与背景颜色： 118 119  120 121### 示例2（使用onHoverMove） 122 123该示例设置了按钮的 `onHoverMove()` 事件。当手写笔悬浮在按钮时，UI界面会显示当前手写笔悬浮状的位置。 124 125```ts 126// xxx.ets 127@Entry 128@Component 129struct OnHoverMoveEventExample { 130 @State hoverMoveText: string = ''; 131 132 build() { 133 Column({ space: 20 }) { 134 Button('onHoverMove') 135 .width(180).height(80) 136 .onHoverMove((event: HoverEvent) => { 137 this.hoverMoveText = 'onHoverMove:\nXY = (' + event.x + ', ' + event.y + ')' + 138 '\nwindowXY = (' + event.windowX + ', ' + event.windowY + ')' + 139 '\ndisplayXY = (' + event.displayX + ', ' + event.displayY + ')'; 140 }) 141 142 Text(this.hoverMoveText) 143 }.padding({ top: 30 }).width('100%') 144 } 145} 146``` 147 148示意图： 149 150手写悬浮在Button组件上时，UI不断刷新笔尖的位置信息： 151 152
