Controlling pointer-events

You can control what elements can be the target of mouse events with CSS.

Disable Pointer-Events

pointer-events is the CSS attribute that determines whether an element can be the target of a mouse event. By default, DOM elements are clickable and register these mouse events.

To disallow the mouse event to register on the DOM event, disable it via:

.some-element { pointer-events: none; }

(There are some caveats regarding event listeners that the MDN docs explore nicely.)

Layering Pass Through

When you position DOM elements on top of one another such that they're layered, the top-most element will be the one to receive a mouse event in the case of a click. But when pointer-events: none has disabled the mouse event registration on the element, the event will pass through the element to the DOM element layered beneath it.

This becomes very useful if you have something layered visually on top that you don't want clickable, but you do want to click the thing beneath or behind it.

This works nicely when the elements are in a sibling structure:

<div>
  <div class="on-bottom" /> 
  <div class="on-top" /> 
</div>

.on-top { /* ... */ pointer-events: none; }
.on-bottom { /* ... */ }

Child Re-enabled

If you have a parent with pointer-events: none, you have to explicitly turn the pointer events back on for the children. There's no automatic pass through in this case. You affect all children until you re-enabled pointer events on them:

<div class="parent">
  <div class="child" /> 
</div>

.parent { /* ... */ pointer-events: none; }
.child { /* ... */ pointer-events: all; }

What are some other things that you watch out for when controlling pointer events?