1# Mouse Event 2 3If a mouse action triggers multiple events, the order of these events is fixed. By default, mouse events are transmitted transparently. 4 5> **NOTE** 6> 7> - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8> - For the time being, a mouse event can be triggered only by an external mouse device. 9 10## onHover 11 12onHover(event: (isHover: boolean, event: HoverEvent) => void): T 13 14Triggered when the mouse pointer enters or leaves the component. 15 16**Atomic service API**: This API can be used in atomic services since API version 11. 17 18**System capability**: SystemCapability.ArkUI.ArkUI.Full 19 20**Parameters** 21 22| Name | Type | Mandatory| Description | 23| ------------------- | ----------------------------------- | ---- | ------------------------------------------------------------ | 24| isHover | boolean | Yes | Whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.| 25| event<sup>11+</sup> | [HoverEvent](#hoverevent11)| Yes | Bubbling of the blocking event. | 26 27**Return value** 28 29| Type| Description| 30| -------- | -------- | 31| T | Current component.| 32 33## onMouse 34 35onMouse(event: (event: MouseEvent) => void) 36 37Triggered when the component is clicked by a mouse button or the mouse pointer moves on the component. 38 39**Atomic service API**: This API can be used in atomic services since API version 11. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Full 42 43**Parameters** 44 45| Name | Type | Mandatory| Description | 46| ------- | --------------------------------- | ---- | ------------------------------------------------------------ | 47| event | [MouseEvent](#mouseevent) | Yes | Timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.| 48 49 50## MouseEvent 51 52Inherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent). 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56| Name | Type | Description | 57| ---------------------- | ---------------------------------------- | ---------------------------- | 58| x | number | X coordinate of the mouse pointer relative to the upper left corner of the component being clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 59| y | number | Y coordinate of the mouse pointer relative to the upper left corner of the component being clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 60| button | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 61| action | [MouseAction](ts-appendix-enums.md#mouseaction) | Mouse action.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 62| stopPropagation | () => void | Stops the event from bubbling upwards or downwards.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 63| target | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the component that triggers the event.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 64| windowX<sup>10+</sup> | number | X coordinate of the mouse pointer relative to the upper left corner of the application window.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 65| windowY<sup>10+</sup> | number | Y coordinate of the mouse pointer relative to the upper left corner of the application window.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 66| displayX<sup>10+</sup> | number | X coordinate of the mouse pointer relative to the upper left corner of the application screen.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 67| displayY<sup>10+</sup> | number | Y coordinate of the mouse pointer relative to the upper left corner of the application screen.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 68| screenX<sup>(deprecated)</sup> | number | X coordinate of the mouse pointer relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowX** instead.| 69| screenY<sup>(deprecated)</sup> | number | Y coordinate of the mouse pointer relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowY** instead.| 70 71## HoverEvent<sup>11+</sup> 72 73Inherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent). 74 75**Atomic service API**: This API can be used in atomic services since API version 11. 76 77**System capability**: SystemCapability.ArkUI.ArkUI.Full 78 79| Name | Type | Description | 80| --------------- | ---------- | ------- | 81| stopPropagation | () => void | Stops the event from bubbling upwards or downwards.| 82 83## Example 84 85```ts 86// xxx.ets 87@Entry 88@Component 89struct MouseEventExample { 90 @State hoverText: string = 'no hover'; 91 @State mouseText: string = ''; 92 @State action: string = ''; 93 @State mouseBtn: string = ''; 94 @State color: Color = Color.Blue; 95 96 build() { 97 Column({ space: 20 }) { 98 Button(this.hoverText) 99 .width(180).height(80) 100 .backgroundColor(this.color) 101 .onHover((isHover: boolean, event: HoverEvent) => { 102 // Use the onHover event to dynamically change the text content and background color of a button when the mouse pointer is hovered on it. 103 if (isHover) { 104 this.hoverText = 'hover'; 105 this.color = Color.Pink; 106 } else { 107 this.hoverText = 'no hover'; 108 this.color = Color.Blue; 109 } 110 }) 111 Button('onMouse') 112 .width(180).height(80) 113 .onMouse((event: MouseEvent):void => { 114 if(event){ 115 switch (event.button) { 116 case MouseButton.None: 117 this.mouseBtn = 'None'; 118 break; 119 case MouseButton.Left: 120 this.mouseBtn = 'Left'; 121 break; 122 case MouseButton.Right: 123 this.mouseBtn = 'Right'; 124 break; 125 case MouseButton.Back: 126 this.mouseBtn = 'Back'; 127 break; 128 case MouseButton.Forward: 129 this.mouseBtn = 'Forward'; 130 break; 131 case MouseButton.Middle: 132 this.mouseBtn = 'Middle'; 133 break; 134 } 135 switch (event.action) { 136 case MouseAction.Hover: 137 this.action = 'Hover'; 138 break; 139 case MouseAction.Press: 140 this.action = 'Press'; 141 break; 142 case MouseAction.Move: 143 this.action = 'Move'; 144 break; 145 case MouseAction.Release: 146 this.action = 'Release'; 147 break; 148 } 149 this.mouseText = 'onMouse:\nButton = ' + this.mouseBtn + 150 '\nAction = ' + this.action + '\nXY=(' + event.x + ',' + event.y + ')' + 151 '\nwindowXY=(' + event.windowX + ',' + event.windowY + ')'; 152 } 153 }) 154 Text(this.mouseText) 155 }.padding({ top: 30 }).width('100%') 156 } 157} 158``` 159 160 161 162The figure below shows how the button looks like when hovered on. 163 164  165 166The figure below shows how the button looks like when clicked. 167 168 169
