CSS Quick Tip: Block Pointer Events from CSS

The pointer-events is a little less known but a handy CSS attribute which we can determine what an element could do when a pointer or a touch event triggered on it.

In practice, this means we can just disable a click or a touch event on any specific DOM element from CSS, besides this disabling, there are more:

  • we get the default cursor instead of the pointer,
  • the hover and the active state are disabled on the element.

For the first hear its hard to imagine the use case of this attribute, but there is a plenty of situation where this can be handy.

The property can get 11 different values, from these eight is only valid for SVG. For HTML you can use the followings:

  • none – disable all of the pointer and touch events,
  • auto – set back the default value,
  • inherit – inherit the value from its parent.

As you can see there aren’t any unique value – in HTML – it is like any other CSS attribute with the standard keywords.

Use Case #1 – Disable something

If you have an AJAX form, usually you disable the submit button with a specific class until you validate all the input. If you do so beside the visual button formatting you can also add the pointer-events: none; line thus your event will be disabled too, and your cursor will be set to default.

Use Case #2 – Destroy the z-index value

In my opinion, this is the most used case when we use this property. If you position your element on the z-axis, you can simply disable some of your top layers. It will be visible, but you can simply click or select text through it like in the Pen!

See the Pen Pointer Evets Demo 01 by Adam Laki (@adamlaki) on CodePen.