CSS pointer-events: Controlling Click and Hover Interactions

Every click or hover on a webpage triggers a chain of events, but the browser must first determine which element is under the pointer. The CSS pointer-events property gives you fine-grained control over this hit-testing process, deciding whether an element can become the target of pointer events like click, mousemove, or hover.

How Hit-Testing Works

When you move your mouse or tap a screen, the browser performs a hit test: it finds the topmost element at that point. Normally, that element receives the event. But if that element has pointer-events: none, the browser skips it and looks at the next element underneath. This simple behavior opens up many possibilities.

The Main Values: auto and none

For most HTML elements, you'll primarily use two values:

• auto (default): The element behaves normally and can be the target of pointer events.
• none: The element itself does not respond to pointer events; events pass through to elements behind it.

This is incredibly useful for overlays, modals, or loading spinners. Imagine a modal with a full-page backdrop. If the backdrop has pointer-events: none, users can click through it to interact with the underlying page—unless you want to block interactions, in which case you set it to auto.

SVG-Specific Values

SVG elements have additional values that provide granular control over which parts of a graphic are interactive. These include visiblePainted, visibleFill, visibleStroke, painted, fill, stroke, and bounding-box. They allow you to make only filled areas, strokes, or the entire bounding box interactive.

For example, fill makes only the filled area of a shape clickable, while stroke targets only the outline. This is particularly useful for complex illustrations where you want precise interactivity without overlapping hit areas.

Inheritance and Accessibility

pointer-events is an inherited property. If you set it on a parent, children inherit that value unless overridden. This is why, when using a modal overlay, you must set pointer-events: none on the overlay but then restore auto on the modal itself—so the modal remains clickable.

However, pointer-events: none does not prevent keyboard focus or selection. Users can still tab to focusable elements, and they can still select text with Ctrl+A. If you need to fully disable interactivity, consider using the disabled attribute on form controls or the inert attribute for entire sections.

Event Bubbling and Capturing

It's important to note that pointer-events only affects whether an element becomes the event target. It does not stop events from bubbling or capturing. If a child with pointer-events: auto is clicked inside a parent with pointer-events: none, the child becomes the target, and the event will bubble up to the parent—so event listeners on the parent will still fire.

Practical Examples

• Modal Overlay: Set pointer-events: none on the backdrop to allow clicks to pass through, and set auto on the modal itself.
• Invisible Menus: Hide a submenu by setting opacity: 0 and pointer-events: none to prevent accidental clicks while invisible.
• Interactive SVGs: Use fill or stroke to make only certain parts of a graphic clickable.

Browser Support

pointer-events is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. It's a stable feature with consistent behavior across platforms.

By mastering pointer-events, you can create more intuitive, polished interfaces that respond exactly as users expect, without unwanted interactions.