1# 鼠标事件 2 3在鼠标的单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。 4 5> **说明：** 6> 7> - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> - 目前仅支持通过外接鼠标触发。 9 10## onMouse 11 12onMouse(event: (event: MouseEvent) => void) 13 14当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时，触发该回调。 15 16**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 17 18**系统能力：** SystemCapability.ArkUI.ArkUI.Full 19 20**参数：** 21 22| 参数名 | 类型 | 必填 | 说明 | 23| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 24| event | [MouseEvent](#mouseevent对象说明) | 是 | 返回触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 | 25 26 27## MouseEvent对象说明 28 29继承于[BaseEvent](ts-gesture-customize-judge.md#baseevent对象说明)。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33| 名称 | 属性类型 | 描述 | 34| ---------------------- | ---------------------------------------- | ---------------------------- | 35| x | number | 鼠标位置相对于当前组件左上角的x轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 36| y | number | 鼠标位置相对于当前组件左上角的y轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 37| button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 38| action | [MouseAction](ts-appendix-enums.md#mouseaction) | 鼠标动作。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 39| stopPropagation | () => void | 阻塞事件冒泡。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 40| target | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发事件的元素对象显示区域。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 41| windowX<sup>10+</sup> | number | 鼠标位置相对于应用窗口左上角的x轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 42| windowY<sup>10+</sup> | number | 鼠标位置相对于应用窗口左上角的y轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 43| displayX<sup>10+</sup> | number | 鼠标位置相对于应用屏幕左上角的x轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 44| displayY<sup>10+</sup> | number | 鼠标位置相对于应用屏幕左上角的y轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 45| screenX<sup>(deprecated)</sup> | number | 鼠标位置相对于应用窗口左上角的x轴坐标。<br>从API Version 10开始不再维护，建议使用windowX代替。 | 46| screenY<sup>(deprecated)</sup> | number | 鼠标位置相对于应用窗口左上角的y轴坐标。<br>从API Version 10开始不再维护，建议使用windowY代替。 | 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) => { 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
