The Mechanics of Hit-Testing
The CSS pointer-events property controls whether an element can become the target of pointer events like clicks and hovers. To understand how it works, you must understand hit-testing. When a user interacts with the page, the browser determines which element is under the pointer. Normally, it chooses the topmost element.
If that topmost element has pointer-events set to none, the browser skips it and continues looking for the next eligible element underneath. The property does not disable events; it simply changes which element becomes the event target.
Common Use Cases: Modals and Overlays
A classic use case is a full-page modal overlay. You might use a container to center the modal, but that container covers the entire viewport. Without modification, it prevents pointer events from reaching the background elements. Setting pointer-events to none on the container fixes this.
However, pointer-events is an inherited property. Setting it to none on a parent means its children inherit that value. To make the modal itself interactive, you must explicitly restore pointer-events to auto on the modal content.
SVG-Specific Control
Beyond auto and none, the property defines nine SVG-specific keyword values. These provide finer control over which parts of a graphic can receive events. For example, visiblePainted ensures the element only receives events when the pointer is over a filled area or a stroked edge. bounding-box allows events anywhere inside the element's smallest surrounding rectangle, regardless of its actual shape.
Limitations and Accessibility
It is crucial to remember that pointer-events none only prevents the element from becoming the target of pointer events. It does not stop users from selecting text via keyboard shortcuts, nor does it prevent keyboard focus. If you need to disable a native form control, use the disabled attribute. If your goal is to make an entire section completely non-interactive, the inert attribute is the correct, accessible choice.