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## onMouse 11 12onMouse(event: (event: MouseEvent) => void) 13 14Triggered when the component is clicked by a mouse button or the mouse pointer moves on 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| 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.| 25 26 27## MouseEvent 28 29Inherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent). 30 31**System capability**: SystemCapability.ArkUI.ArkUI.Full 32 33| Name | Type | Description | 34| ---------------------- | ---------------------------------------- | ---------------------------- | 35| 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. | 36| 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. | 37| 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. | 38| 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. | 39| 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. | 40| 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. | 41| 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.| 42| 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.| 43| 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.| 44| 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.| 45| 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.| 46| 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.| 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) => { 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 clicked. 128 129 130
