Pointer events
Use pointer events to prevent unwanted click and touch interactions.
Designs with overlapping elements or hover animations can sometimes trigger unintended mouse interactions and contribute to a poor experience for your site visitors. With pointer events, you can disable click or touch interactions on an element to ensure that visual-only elements don’t interrupt interactions with other elements.
In this lesson, you’ll learn:
How to use pointer events
You can use pointer events to ensure that only desired elements respond to click and touch interactions. This is useful for managing interactions on overlapping elements (e.g., a background video with overlaid text or icons) or on designs with hover animations or tooltips.
In Webflow, there are two options for pointer events:
- Auto — default value for all elements, which allows standard click and touch interactions
- None — prevents all pointer events (i.e., click and touch interactions)
Pro tip: You can set Pointer to None to temporarily disable click and touch interactions to troubleshoot or modify your design without changing your design’s structure.
How to set pointer events to disable interactions
To set pointer events to disable interactions on an element:
- Select the element on the canvas
- Go to Style panel > Effects > Events
- Set Pointer to None
Elements with Pointer set to None appear with a “no click” icon in the Navigator panel.
Note: Elements with Pointer set to None still receive focus in sequential keyboard navigation with the Tab key.
Important: Elements with Pointer set to None remain visible, but aren’t selectable on the canvas. If you need to select an element with Pointer set to None, you can do so from the Navigator panel.
Child elements of an element with Pointer set to None inherit its pointer event setting and are not marked with a “no click” icon in the Navigator panel. If you want to override the inherited pointer event setting to make a child element interactive, select the child element in the Navigator panel, go to Style panel > Effects > Events, and set Pointer to Auto.
Note: If you disable interactions on an element by setting Pointer to None and then add an interaction with a mouse trigger (e.g., mouse click (tap), mouse hover, etc.) to that element, the interaction will not be triggered.
FAQ
Why is an overlaid element not clickable even though it’s on top?
Pointer may be set to None for the overlaid element, making it non-interactive. Set Pointer to Auto to allow interactions if this effect was not intended.
I set Pointer to None but still see unwanted interactions. Why?
Other elements on the page, especially parent or overlapping elements, may be influencing interactions on this element. Make sure you’ve set pointer events appropriately for all related elements.