How to stop all mouse hover events in UMG at runtime.

Development Programming & Scripting Blueprint
, , ,
1

I am working on a ui project. the system can be controlled with either mouse or gamepad/keyboard. everything is working except one problem. i will try to explain the problem with this example.
lets assume i am in the main menu screen (there are buttons like new game, settings, exit.). and i am controlling the ui with keyboard and i have my mouse at x position (The cursor is at the middle of the screen). so now when i press the settings button with keyboard the settings window is opened. I have made it so when i open the settings menu first setting should be selected. but since the mouse was in the middle position, that mouse activates the hover event on other setting and selects it. This doesn’t break anything it just hovers the setting and selects it. (this is happening in all others widgets as well) so i think the way to fix this would be to stop all the hovers events from mouse whenever any key is pressed. and when mouse is moved enable all the hover events again. is this possible? or if there is any other better way?

2

you’d better checkout the official sample , it demonstrates how to handle 3 input controllers

3

Does ue5 have a sample for this? i didn’t know. can you please link it. and also i am not using common ui it just plain umg.

4

The most simple solution would be to hide the cursor when keyboard or gamepad get used.
So on key/gamepad pressed, get controller > show cursor False.
OnMouseMove > get controller > show cursor True

2nd method would be to call a Reset and Highlight function for the buttons.
OnPressed > reset all buttons(eg Cancel & Confirm) and Highlight ‘this’ button
OnMouseHover > reset all buttons and Highlight ‘this’ button
*The possible issue will then be which event comes first, so this will need to be tested.

5

this sample:
https://www.fab.com/listings/bd733d81-7c29-44fe-b53f-65b14d06a9e2

6

i tried using the showmousecursor but i just found out that its not responsible for hiding and showing the mouse cursor. and hover events still work maybe its a bug? (iam using 5.4). but set input mode to game only works. So on event construct of my widget i set input mode to game only and after a delay i set it back to game and ui only (this removes the hover event form running the first time when widget is loaded). thanks your second solution helped me get this.

1 Like
7

Yes, what you’re describing is a common issue when dealing with mixed input methods (keyboard/mouse) in UI design. The mouse hover events can interfere with keyboard navigation if the cursor is at a position where it triggers hover events, even when you’re controlling the UI with the keyboard.

Solution: Disabling Hover Events on Key Press

The approach you mentioned — disabling the hover events when any key is pressed and enabling them again when the mouse moves — is definitely a feasible solution. Here’s a general idea of how you could implement it:

  1. Track Keyboard Input:

    • Set a flag (isKeyboardActive or similar) when any key is pressed. This flag will indicate that the user is navigating with the keyboard.

  2. Disable Hover Events:

    • Whenever isKeyboardActive is true, disable the hover events for all UI elements (buttons, settings, etc.). This can be done by preventing mouse events from being handled or by programmatically disabling hover effects on the elements.

  3. Enable Hover Events on Mouse Move:

    • Add a listener to detect mouse movement. Whenever the mouse moves, set isKeyboardActive to false and re-enable hover events.

Sample Implementation Outline (Pseudocode):

let isKeyboardActive = false;

// Disable hover events
function disableHoverEvents() {
    // Code to disable hover interactions on all UI elements
}

// Enable hover events
function enableHoverEvents() {
    // Code to enable hover interactions on all UI elements
}

// Event listener for key press
document.addEventListener('keydown', () => {
    isKeyboardActive = true;
    disableHoverEvents();
});

// Event listener for key release (optional, if needed)
document.addEventListener('keyup', () => {
    isKeyboardActive = false;
});

// Event listener for mouse movement
document.addEventListener('mousemove', () => {
    if (isKeyboardActive) {
        isKeyboardActive = false;
        enableHoverEvents();
    }
});

Alternative Approach: Use a UI State Management System

You can also implement a more robust state management system that tracks which input method (keyboard or mouse) is active at any given time. This would allow for more fine-grained control over UI interactions and would be easier to extend as your project grows.

  1. State Management:

    • Define states for input methods (e.g., keyboard and mouse).
    • Toggle the state based on user actions (key press or mouse move).

  2. Handle UI Interactions:

    • When in keyboard state, ignore hover events and allow keyboard navigation.
    • When in mouse state, handle hover events but ignore keyboard input.

This approach gives you more flexibility to easily manage different types of input.

Conclusion:

Both the direct approach (disabling hover events) and a more complex state-based approach can work, depending on the complexity of your project. The first solution is easier to implement and works for smaller projects, while the second approach would offer a more scalable and maintainable solution for larger applications.