- Where to find it
- Labelled Pointer Events in the Widget Settings drawer (gear in the widget header).
- Per device
- Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
- Underlying CSS
pointerEvents
In plain English
Pointer Events decides who receives a click or tap on the whole widget. "auto" (the default) takes the click. "none" lets the click fall through as if the widget were not there.
The setting that most needs this is an overlay layer. A layer covers the base, so without "none" every click aimed at the base would hit the layer instead. Set Pointer Events to "none" in Layer Settings and the base stays clickable. A button sitting on that layer can take clicks back by setting "auto" on its own column.
What each option does
| Option | What you will see |
|---|---|
auto | The default. Clicks and taps land on the widget or layer and its contents. |
none | Clicks and taps pass through the widget or layer to whatever is behind it. Descendants can take them back with "auto". |
When you would use it
- An overlay layer should decorate the base without blocking clicks on it.
- The whole widget is a visual overlay on host-page content that should stay clickable.
How to change it
- Open Widget Settings (or Layer Settings, when a layer is selected) from the gear, then "Pointer Events".
- Choose "none" to let clicks through, or "auto" to take them.
- Open Preview to confirm — the editing canvas keeps the widget clickable so you can still work on it.
- The overlay layers guide at /docs/composer/overlay-layers walks through the usual recipe: none on the layer, auto on the one control that should still work.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.
Watch out for
- This setting is left out on the editing canvas so you can still click and drag. Open Preview to see clicks actually pass through.
- "none" on the whole widget makes every control inside it unusable, unless a child sets "auto" to take clicks back.
- On a layer this is usually the setting you want, not Hide. Hide removes the layer from view; Pointer Events of "none" keeps it visible and lets clicks through.
Related settings
- Pointer Events
- Collection Pointer Events
- Row Pointer Events
- Hide Widget
- Using a CSS variable instead of a typed value
- Setting a different value per device
For developers
The technical reference for what this setting produces: MDN: pointer-events. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.