The .prevent_default action prevents the default behavior of the browser for
the action. This action can be added to any existing event, or it can be used on its own by
specifying rx.prevent_default as an event handler.
A common use case for this is to prevent navigation when clicking a link.
The .stop_propagation action stops the event from propagating to parent elements.
This action is often used when a clickable element contains nested buttons that
should not trigger the parent element's click event.
In the following example, the first button uses .stop_propagation to prevent
the click event from propagating to the outer vstack. The second button does not
use .stop_propagation, so the click event will also be handled by the on_click
attached to the outer vstack.
btn1 - Stop Propagationbtn2 - Normal PropagationReset
For events that are fired frequently, it can be useful to throttle or debounce
them to avoid network latency and improve performance. These actions both take a
single argument which specifies the delay time in milliseconds.
The .throttle action limits the number of times an event is processed within a
a given time period. It is useful for on_scroll and on_mouse_move events which are
fired very frequently, causing lag when handling them in the backend.
Throttled events are discarded.
In the following example, the on_scroll event is throttled to only fire every half second.
The .debounce action delays the processing of an event until the specified
timeout occurs. If another event is triggered during the timeout, the timer is
reset and the original event is discarded.
Debounce is useful for handling the final result of a series of events, such as
moving a slider.
Debounced events are discarded.
In the following example, the slider's on_change handler, update_value, is
only triggered on the backend when the slider value has not changed for half a
second.
The .temporal action prevents events from being queued when the backend is down.
This is useful for non-critical events where you do not want them to pile up if there is
a temporary connection issue.
Temporal events are discarded when the backend is down.
In the following example, the rx.moment component with interval and on_change uses .temporal to
prevent periodic updates from being queued when the backend is down:
Current Time:
Time updates will not be queued if the backend is down.