From my experience I saw, a lot of people for whom the difference between the MouseUp
and the Click
event of e.g. a Button widget was not clear.
TLDR, if you don’t know which one you should use use the Click
event
Click event
The Click
event is triggered if the user clicks the widget with the mouse or finger. The event is timed after the mouse / finger is released.
If you press the button but realize that you don’t want to execute the action, you can still move away your mouse / finger before releasing. In that case the Click
event will not be triggered. This same behavior is present in other major UI, e.g. also in MS Windows.
Always use the click event if you want to start an action, set a value… This is delivering the user experience which the user is accustomed to from other environments. It also works well in scrollable contents.
MouseUp / MouseDown event
The MouseDown
event triggers as soon as you press the mouse switch or as soon as you touch the widget with your finger. As counterpart, the MouseUp
event triggers as soon as you release the mouse switch or remove your finger. A MouseUp
event will ALWAYS be triggered if you touched or clicked a widget. It cannot be avoided anymore.
Because this is not the accustomed user experience it is NOT recommended to trigger actions from these two events. The events also lead to problems in scrollable contents, as the user will trigger the event on scrolling.
Use case of MouseUp / MouseDown event
If you ever used a toggle button, you can see that there are three states / colors.
- backColor in the non toggled, untouched state
- mouseDownBackColor in the moment when you press the mouse or finger
- checkedBackColor in the toggled, untouched state
These states can be important in UI / UX design. But apart from buttons, many widgets do not have these separate styles, as it is not used in most cases. If you want to design a similar style change like buttons do, you can react to the MouseDown
/ MouseUp
events and change the widget style with the SetStyle
actions. Especially within CopoundWidgets
it can be a useful tool to create tailor-made buttons or other UI elements.
The following sample changes the style of a GroupBox on MouseDown / MouseUp event of the GroupBox. So, all widget user interactions within the group lead to a style change.
Here’s the whole sample project in case someone wants to test it.
ButtonEvents.zip (113.3 KB)