1 2 3 4 5# Mouse Event 6 7If a mouse action triggers multiple events, the order of these events is fixed. By default, mouse events are transmitted transparently. 8 9> **NOTE** 10> 11> - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 12> - For the time being, a mouse event can be triggered only by an external mouse. 13 14 15## Events 16 17| Name | Bubbling Supported| Description | 18| ---------------------------------------- | ---- | ---------------------------------------- | 19| onHover(event: (isHover?: boolean, event<sup>10+</sup>?: HoverEvent) => void) | Yes | Triggered when the mouse pointer enters or leaves the component.<br>**isHover**: whether the mouse pointer hovers over the component. The value **true** means that the mouse pointer enters the component, and the value **false** means that the mouse pointer leaves the component.<br>**event**: bubbling blocking of the event.| 20| onMouse(event: (event?: MouseEvent) => void) | Yes | Triggered when the component is clicked by a mouse button or the mouse pointer moves on the component. The **event** parameter indicates the 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.| 21 22 23## MouseEvent 24 25| Name | Type | Description | 26| ---------------------- | ---------------------------------------- | ---------------------------- | 27| x | number | X coordinate of the mouse pointer relative to the upper left corner of the component being clicked. | 28| y | number | Y coordinate of the mouse pointer relative to the upper left corner of the component being clicked. | 29| button | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button. | 30| action | [MouseAction](ts-appendix-enums.md#mouseaction) | Mouse action. | 31| stopPropagation | () => void | Stops the event from bubbling upwards or downwards. | 32| timestamp<sup>8+</sup> | number | Timestamp of the event. It is interval between the time when the event is triggered and the time when the system starts, in nanoseconds.| 33| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the component that triggers the event. | 34| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device. | 35| windowX<sup>10+</sup> | number | X coordinate of the mouse pointer relative to the upper left corner of the application window.| 36| windowY<sup>10+</sup> | number | Y coordinate of the mouse pointer relative to the upper left corner of the application window.| 37| displayX<sup>10+</sup> | number | X coordinate of the mouse pointer relative to the upper left corner of the application screen.| 38| displayY<sup>10+</sup> | number | Y coordinate of the mouse pointer relative to the upper left corner of the application screen.| 39| 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.| 40| 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.| 41 42## HoverEvent<sup>10+</sup> 43 44| Name | Type | Description | 45| --------------- | ---------- | ------- | 46| stopPropagation | () => void | Stops the event from bubbling upwards or downwards.| 47 48## Example 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 // Use the onHover event to dynamically change the text content and background color of a button when the mouse pointer is hovered on it. 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 127The figure below shows how the button looks like when hovered on. 128 129  130 131The figure below shows how the button looks like when clicked. 132 133 134
