Developers

Search

Disabling pointer events

Learn how to prevent a layer from receiving clicks, taps, or other pointer interactions in Framer.

In Framer, you can disable interactions on a specific layer by adjusting the Pointer Events style. This setting controls whether a layer can respond to pointer-based actions like clicks, presses, or taps.

How to disable pointer events

Follow these steps to disable pointer events on a layer:

  1. Select the layer you want to modify.

  2. Open the Properties panel on the right.

  3. Click the + icon under Styles to add a new property.

  4. Search for and enable Pointer Events.

Screenshot of Framer's Properties panel showing style settings. The Pointer property is visible at the bottom of the panel with "None" selected from the dropdown menu. Above it are other style properties including Opacity, Visible (set to "Yes"), Fill (set to "F2F2F2"), Overflow (set to "Hidden"), Radius, Border, and Shadows. The panel has a dark theme interface with white and gray text.

Pointer events options

Once added, you can choose between two options:

  • None: The layer will not respond to any pointer events. However, its child layers can still receive interactions if allowed.

  • Auto: The layer behaves normally and responds to pointer events as expected.

If you encounter any issues or need further assistance, feel free to contact Framer’s support team through our contact page.

In Framer, you can disable interactions on a specific layer by adjusting the Pointer Events style. This setting controls whether a layer can respond to pointer-based actions like clicks, presses, or taps.

How to disable pointer events

Follow these steps to disable pointer events on a layer:

  1. Select the layer you want to modify.

  2. Open the Properties panel on the right.

  3. Click the + icon under Styles to add a new property.

  4. Search for and enable Pointer Events.

Screenshot of Framer's Properties panel showing style settings. The Pointer property is visible at the bottom of the panel with "None" selected from the dropdown menu. Above it are other style properties including Opacity, Visible (set to "Yes"), Fill (set to "F2F2F2"), Overflow (set to "Hidden"), Radius, Border, and Shadows. The panel has a dark theme interface with white and gray text.

Pointer events options

Once added, you can choose between two options:

  • None: The layer will not respond to any pointer events. However, its child layers can still receive interactions if allowed.

  • Auto: The layer behaves normally and responds to pointer events as expected.

If you encounter any issues or need further assistance, feel free to contact Framer’s support team through our contact page.

FAQ

  • How do I disable pointer events on a specific layer in Framer?

    To disable pointer events on a layer in Framer, select the layer you want to modify, open the Properties panel on the right, click the + icon under Styles to add a new property, and search for and enable Pointer Events.

  • What options are available for pointer events in Framer, and what do they do?

    Once you add the Pointer Events property, you can choose between 'None' and 'Auto'. 'None' means the layer will not respond to any pointer events, but its child layers can still receive interactions if allowed. 'Auto' means the layer behaves normally and responds to pointer events as expected.

  • If I disable pointer events on a parent layer, will its child layers still be interactive?

    Yes, if you set Pointer Events to 'None' on a parent layer, its child layers can still receive interactions if allowed.

Updated

Related articles

Guide to web accessibility in Framer

How to add Alt Tags to images

How to use semantic tags for navigation and footers

Improving Accessibility with ARIA Labels