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 50This example demonstrates how to set a mouse event on a button. When the button is clicked using a mouse device, the **onMouse** event is triggered to obtain relevant mouse event parameters. 51 52```ts 53// xxx.ets 54@Entry 55@Component 56struct MouseEventExample { 57 @State hoverText: string = 'no hover'; 58 @State mouseText: string = ''; 59 @State action: string = ''; 60 @State mouseBtn: string = ''; 61 @State color: Color = Color.Blue; 62 63 build() { 64 Column({ space: 20 }) { 65 Button(this.hoverText) 66 .width(180).height(80) 67 .backgroundColor(this.color) 68 .onHover((isHover: boolean, event: HoverEvent) => { 69 // Use the onHover event to dynamically change the text content and background color of a button when the mouse pointer is hovered on it. 70 if (isHover) { 71 this.hoverText = 'hover'; 72 this.color = Color.Pink; 73 } else { 74 this.hoverText = 'no hover'; 75 this.color = Color.Blue; 76 } 77 }) 78 Button('onMouse') 79 .width(180).height(80) 80 .onMouse((event: MouseEvent):void => { 81 if(event){ 82 switch (event.button) { 83 case MouseButton.None: 84 this.mouseBtn = 'None'; 85 break; 86 case MouseButton.Left: 87 this.mouseBtn = 'Left'; 88 break; 89 case MouseButton.Right: 90 this.mouseBtn = 'Right'; 91 break; 92 case MouseButton.Back: 93 this.mouseBtn = 'Back'; 94 break; 95 case MouseButton.Forward: 96 this.mouseBtn = 'Forward'; 97 break; 98 case MouseButton.Middle: 99 this.mouseBtn = 'Middle'; 100 break; 101 } 102 switch (event.action) { 103 case MouseAction.Hover: 104 this.action = 'Hover'; 105 break; 106 case MouseAction.Press: 107 this.action = 'Press'; 108 break; 109 case MouseAction.Move: 110 this.action = 'Move'; 111 break; 112 case MouseAction.Release: 113 this.action = 'Release'; 114 break; 115 } 116 this.mouseText = 'onMouse:\nButton = ' + this.mouseBtn + 117 '\nAction = ' + this.action + '\nXY=(' + event.x + ',' + event.y + ')' + 118 '\nwindowXY=(' + event.windowX + ',' + event.windowY + ')'; 119 } 120 }) 121 Text(this.mouseText) 122 }.padding({ top: 30 }).width('100%') 123 } 124} 125``` 126 127 128 129The figure below shows how the button looks like when clicked. 130 131 132
