Widely available Supported across all major browsers. Safe to use in production.

pointer-events

The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
pointer-events
1
12
1.5
4
18
3.2
html elements

Applies to HTML elements
2
12
3.6
4
18
3.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Make decorative overlay transparent on click */
.decorative-overlay {
  pointer-events: none;
}

/* Disabled button */
.button:disabled {
  pointer-events: none;
  opacity: 0.5;
}

Live demo

clicktransparentoverlay

pointer-events clicktransparentoverlay demo.

PreviewFullscreen

Disabledizationbutton

pointer-events Disabledizationbutton demo.

PreviewFullscreen

SVGelement. Control

pointer-events SVGelement. Control demo.

PreviewFullscreen

Use cases

  • Using pointer-events

    The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links