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