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