pointer-events

pointer-events controls whether a box can be the target of pointer hit testing. For ordinary HTML, auto and none are the useful interoperable values. SVG has additional paint-sensitive values.

Click through a decorative layer

The stripe layer sits over the button but has pointer-events:none. Clicking the button still updates the status. The layer is decorative and also hidden from accessibility APIs.

<div class="stage">
  <button
    type="button"
    onclick="document.getElementById('status').textContent='Button activated'"
  >
    Activate</button
  ><span class="decor" aria-hidden="true"></span>
</div>
<p id="status" role="status">Ready</p>

.stage {
  position: relative;
  display: inline-block;
}
button {
  min-height: 44px;
  padding: 0.75rem 1rem;
}
.decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 8px,
    rgb(37 99 235 / 12%) 8px 16px
  );
}

Allow one child to receive pointer events

The container passes through pointer targeting, but the button explicitly opts back in. Parent listeners can still observe events traveling through the parent during propagation.

<div class="overlay">
  <p>Non-targetable overlay text</p>
  <button type="button" onclick="this.textContent='Activated'">
    Interactive child
  </button>
</div>

.overlay {
  pointer-events: none;
  padding: 1rem;
  background: #eff6ff;
}
.overlay button {
  pointer-events: auto;
  min-height: 44px;
  padding: 0.75rem;
}

Values and inheritance

The initial value is auto and the property is inherited. None removes the element itself from ordinary pointer hit testing; descendants can override it. Pointerenter/pointerleave and capture/bubble listeners may still run through a parent with none.

SVG values such as visiblePainted, visibleFill, and visibleStroke test visibility and painted fill/stroke regions. VisiblePainted means targeting painted visible areas, not “noninteractive but visually responsive.” These values are not a general HTML button API; check support for the content type.

This does not disable keyboard activation

A button with pointer-events:none can still receive Tab focus and activate from the keyboard. Use disabled controls for real disabled behavior. Aria-disabled alone also requires the application to prevent activation.

A transparent overlay can block clicks unless hit testing is managed. Learn opacity, position, and accessible buttons.

Sources and browser support

MDN: pointer-events describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.