The Up-Event
The up-event occurs on the lifting of a mouse button, key, or touch event. The up-event exists in contrast to its corresponding down-event, and different interactions will treat the up and down events differently. Most actions should occur only after the up-event, so as to allow for cancelation of the action by moving the pointer away from the “clicked” component. The default button behavior on the web, for example, is to cancel a click event if the users cursor leaves the clickable area before the up-event.
Interpreting the up-event properly is also pertinent to satisfying WCAG 2.1 success criterion 2.5.2, which states that pointer events should either be cancellable before the up-event, or reversible, though I suggest implementing both cancellability and reversability.
Activation and Cancellation
Most clickable targets will have a clickable area. A successful click event should occur when a user starts an interaction in the clickable area with a down-event—either by mouse click or touch—and then ends the same interaction in the same clickable area. It is not enough to just interpret any up-event as activating the button, for a user might be attempting to cancel an interaction with some other clickable area by terminating the interaction elsewhere, incedental to the target of the up-event. Cancellation is then available to the user by exiting the clickable area while still holding the button or touching the screen.
Keyboard analogue
For usability and accessibility, almost all interactions should be available through a keyboard. See WCAG 2.1 Guideline 2.1. The keyboard analogue to clicking a button is to focus the clickable element using Tab and Shift + Tab, then to “click” the target with Spacebar or Enter. Cancelling the interaction may be performed by changing focus with Tab before releasing the spacebar or enter key.
Exceptions
There are some cases where waiting for the up-event to perform an action is not possible. Some examples are
- The movement of the pointer during the interaction is captured, as with signing your name on a touch screen.
- Holding down a button creates a state which is reverted on the up-event, like opening a tooltip. This should be avoided. In all cases, the action should be reversible.