Click Event vs. MouseUp / MouseDown

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.

ClickEvent

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.

MouseUpDownEvent

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

ToggleButton

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.

SetStyle

Here’s the whole sample project in case someone wants to test it.
ButtonEvents.zip (113.3 KB)

7 Likes