1 2 3 4 5# 鼠标事件 6 7在鼠标的单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。 8 9> **说明：** 10> 11> - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 12> - 目前仅支持通过外接鼠标触发。 13 14 15## 事件 16 17| 名称 | 支持冒泡 | 描述 | 18| ---------------------------------------- | ---- | ---------------------------------------- | 19| onHover(event: (isHover?: boolean, event<sup>10+</sup>?: HoverEvent) => void) | 是 | 鼠标进入或退出组件时触发该回调。<br/>isHover: 表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。<br/>event: 设置阻塞事件冒泡属性。 | 20| onMouse(event: (event?: MouseEvent) => void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时，触发该回调，event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 | 21 22 23## MouseEvent对象说明 24 25| 名称 | 属性类型 | 描述 | 26| ---------------------- | ---------------------------------------- | ---------------------------- | 27| x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 | 28| y | number | 鼠标位置相对于当前组件左上角的y轴坐标。 | 29| button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 | 30| action | [MouseAction](ts-appendix-enums.md#mouseaction) | 鼠标动作。 | 31| stopPropagation | () => void | 阻塞事件冒泡。 | 32| timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | 33| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发事件的元素对象显示区域。 | 34| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 | 35| windowX<sup>10+</sup> | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 | 36| windowY<sup>10+</sup> | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 | 37| displayX<sup>10+</sup> | number | 鼠标位置相对于应用屏幕左上角的x轴坐标。 | 38| displayY<sup>10+</sup> | number | 鼠标位置相对于应用屏幕左上角的y轴坐标。 | 39| screenX<sup>(deprecated)</sup> | number | 鼠标位置相对于应用窗口左上角的x轴坐标。<br>从API verdion 10开始不再维护，建议使用windowX代替。 | 40| screenY<sup>(deprecated)</sup> | number | 鼠标位置相对于应用窗口左上角的y轴坐标。<br>从API verdion 10开始不再维护，建议使用windowY代替。 | 41 42## HoverEvent<sup>10+</sup>对象说明 43 44| 名称 | 属性类型 | 描述 | 45| --------------- | ---------- | ------- | 46| stopPropagation | () => void | 阻塞事件冒泡。 | 47 48## 示例 49 50```ts 51// xxx.ets 52@Entry 53@Component 54struct MouseEventExample { 55 @State hoverText: string = 'no hover'; 56 @State mouseText: string = ''; 57 @State action: string = ''; 58 @State mouseBtn: string = ''; 59 @State color: Color = Color.Blue; 60 61 build() { 62 Column({ space: 20 }) { 63 Button(this.hoverText) 64 .width(180).height(80) 65 .backgroundColor(this.color) 66 .onHover((isHover?: boolean, event?: HoverEvent):void => { 67 // 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色 68 if (isHover) { 69 this.hoverText = 'hover'; 70 this.color = Color.Pink; 71 } else { 72 this.hoverText = 'no hover'; 73 this.color = Color.Blue; 74 } 75 }) 76 Button('onMouse') 77 .width(180).height(80) 78 .onMouse((event?: MouseEvent):void => { 79 if(event){ 80 switch (event.button) { 81 case MouseButton.None: 82 this.mouseBtn = 'None'; 83 break; 84 case MouseButton.Left: 85 this.mouseBtn = 'Left'; 86 break; 87 case MouseButton.Right: 88 this.mouseBtn = 'Right'; 89 break; 90 case MouseButton.Back: 91 this.mouseBtn = 'Back'; 92 break; 93 case MouseButton.Forward: 94 this.mouseBtn = 'Forward'; 95 break; 96 case MouseButton.Middle: 97 this.mouseBtn = 'Middle'; 98 break; 99 } 100 switch (event.action) { 101 case MouseAction.Hover: 102 this.action = 'Hover'; 103 break; 104 case MouseAction.Press: 105 this.action = 'Press'; 106 break; 107 case MouseAction.Move: 108 this.action = 'Move'; 109 break; 110 case MouseAction.Release: 111 this.action = 'Release'; 112 break; 113 } 114 this.mouseText = 'onMouse:\nButton = ' + this.mouseBtn + 115 '\nAction = ' + this.action + '\nXY=(' + event.x + ',' + event.y + ')' + 116 '\nwindowXY=(' + event.windowX + ',' + event.windowY + ')'; 117 } 118 }) 119 Text(this.mouseText) 120 }.padding({ top: 30 }).width('100%') 121 } 122} 123``` 124 125示意图： 126 127鼠标悬浮时改变文本内容与背景颜色： 128 129  130 131鼠标点击时： 132 133 134
