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!
Follow us on Twitter
Do you want to support and help us? A Twitter following or a sharing means a lot to us. Thank you!