The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

.avoid-clicks { pointer-events: none; }

While the pointer-events property takes eleven possible values, all but three of them are reserved for use with SVG. The three valid values for any HTMl element are:

none prevents all click, state and cursor options on the specified HTML element

prevents all click, state and cursor options on the specified HTML element auto restores the default functionality (useful for use on child elements of an element with pointer-events: none; specified

restores the default functionality (useful for use on child elements of an element with specified inherit will use the pointer-events value of the element’s parent

As demonstrated above, the prime use case for pointer-events is to allow click or tap behavior to “pass through” an element to another element below it on the Z axis. For example, this would be useful for graphic overlays, or hiding elements with opacity (eg. tooltips) and still allowing text-selection on the content below it.

Points of Interest

“The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.” — Mozilla MDN

“If you add a click event listener to an element, then remove the pointer-events style (or change its value to auto, the click event will fire the designated functionality. Basically, the click event respects the pointer-events value.” — David Walsh

Other Resources

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Firefox IE Edge Safari 4 3.6 11 12 4 Mobile / Tablet Android Chrome Android Firefox Android iOS Safari 85 79 2.1 3.2