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对象说明8)。 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| windowX<sup>10+</sup> | number | 鼠标位置相对于应用窗口左上角的x轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 41| windowY<sup>10+</sup> | number | 鼠标位置相对于应用窗口左上角的y轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 42| displayX<sup>10+</sup> | number | 鼠标位置相对于应用屏幕左上角的x轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 43| displayY<sup>10+</sup> | number | 鼠标位置相对于应用屏幕左上角的y轴坐标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 44| screenX<sup>(deprecated)</sup> | number | 鼠标位置相对于应用窗口左上角的x轴坐标。<br>从API Version 10开始不再维护，建议使用windowX代替。 | 45| screenY<sup>(deprecated)</sup> | number | 鼠标位置相对于应用窗口左上角的y轴坐标。<br>从API Version 10开始不再维护，建议使用windowY代替。 | 46| rawDeltaX<sup>15+</sup> | number | 相对于先前上报的鼠标指针位置的X轴偏移量。当鼠标指针处于屏幕边缘时，该值可能小于两次上报的X坐标之差。<br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 47| rawDeltaY<sup>15+</sup> | number | 相对于先前上报的鼠标指针位置的Y轴偏移量。<br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 48| pressedButtons<sup>15+</sup> | MouseButton[] | 所有鼠标上按着的按钮集合。<br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 49 50## 示例 51 52该示例通过按钮设置了鼠标事件，通过鼠标点击按钮可以触发onMouse事件，获取鼠标事件相关参数。 53 54```ts 55// xxx.ets 56@Entry 57@Component 58struct MouseEventExample { 59 @State hoverText: string = 'no hover'; 60 @State mouseText: string = ''; 61 @State action: string = ''; 62 @State mouseBtn: string = ''; 63 @State color: Color = Color.Blue; 64 65 build() { 66 Column({ space: 20 }) { 67 Button(this.hoverText) 68 .width(180).height(80) 69 .backgroundColor(this.color) 70 .onHover((isHover: boolean, event: HoverEvent) => { 71 // 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色 72 if (isHover) { 73 this.hoverText = 'hover'; 74 this.color = Color.Pink; 75 } else { 76 this.hoverText = 'no hover'; 77 this.color = Color.Blue; 78 } 79 }) 80 Button('onMouse') 81 .width(180).height(80) 82 .onMouse((event: MouseEvent):void => { 83 if(event){ 84 switch (event.button) { 85 case MouseButton.None: 86 this.mouseBtn = 'None'; 87 break; 88 case MouseButton.Left: 89 this.mouseBtn = 'Left'; 90 break; 91 case MouseButton.Right: 92 this.mouseBtn = 'Right'; 93 break; 94 case MouseButton.Back: 95 this.mouseBtn = 'Back'; 96 break; 97 case MouseButton.Forward: 98 this.mouseBtn = 'Forward'; 99 break; 100 case MouseButton.Middle: 101 this.mouseBtn = 'Middle'; 102 break; 103 } 104 switch (event.action) { 105 case MouseAction.Hover: 106 this.action = 'Hover'; 107 break; 108 case MouseAction.Press: 109 this.action = 'Press'; 110 break; 111 case MouseAction.Move: 112 this.action = 'Move'; 113 break; 114 case MouseAction.Release: 115 this.action = 'Release'; 116 break; 117 } 118 this.mouseText = 'onMouse:\nButton = ' + this.mouseBtn + 119 '\nAction = ' + this.action + '\nXY=(' + event.x + ',' + event.y + ')' + 120 '\nwindowXY=(' + event.windowX + ',' + event.windowY + ')' + 121 '\ntargetDisplayId = ' + event.targetDisplayId + 122 '\nrawDeltaX = ' + event.rawDeltaX + 123 '\nrawDeltaY = ' + event.rawDeltaY + 124 '\nlength = ' + event.pressedButtons?.length; 125 } 126 }) 127 Text(this.mouseText) 128 }.padding({ top: 30 }).width('100%') 129 } 130} 131``` 132 133示意图： 134 135鼠标点击时： 136 137 138
