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!