Click coordinates
Capture the pointer position when an event occurs.
Live previewreal runtime
Click anywhere on the grid.
state
| name | value | previous | changes |
|---|---|---|---|
| Waiting for the preview to start. | |||
events
- Interact with the preview to record events.
How it works
- :on()line 5An event rule: when the event happens on the matched element (or inside it, for bubbling events), the rule’s state mutations run. The cascade picks one winning mutation per state, per trigger and per element.
- event()lines 6, 7Inside a mutation of an :on() rule: one field of the current event, such as event(local-x), event(key) or event(value), read once as a typed value.
- set()lines 6, 7Sets a state to a value. In an :on() rule it is a mutation of the state on the left, --x: set(5), with typed expressions.
Event-time values. event(local-x) and event(local-y) are read once, when the click happens, and stored. The marker stays where you clicked until the next click.
mouse(x, local) outside a mutation follows the pointer continuously (see the mouse tracker example). Here the value is a snapshot taken by the event.
Native CSS alternative
None. :active matches while the pointer is down, but CSS cannot record where.
Limitations
- A tap counts as a click on touch screens. Keyboard users cannot click a position, so this is a pointer-only demonstration.
Implementation
2 files · 15 linesstyle.cssreactive
/* ---- Reactive CSS -------------------------------------------------------------------------- */.coords { --x: state(0px); --y: state(0px); --clicks: state(0); }/* Read once, at the click: a snapshot, not continuous tracking. */.coords .pad:on(click) { --x: set(round(event(local-x), 1px)); --y: set(round(event(local-y), 1px)); --clicks: increment(1);}.coords .marker { translate: var(--x) var(--y); }.coords:when(--clicks > 0) .marker { opacity: 1; }.coords .x { content: var(--x); }.coords .y { content: var(--y); }.coords .n { content: var(--clicks); }state()Function · hover any red tokenMakes each matching element the owner of an independent state with an initial value.Reference →
Source: site/src/catalog/api/click-coordinates/. style.css from its Reactive CSS divider; the layout above it and the shared api.css run but are not shown.
Related
Live values
A value that changes on its own, every two seconds. Not a clock: the API has no wall-clock time.
live()random()