CSS Quickie: pointer-events

Click events are one of the core functionalities of any application built across any platform(web, mobile, desktop, TV, etc.). In fact, it really is fair to say, click events are what make applications interactive. So having an understanding of the ways we have control over what triggers them is important. In CSS, luckily, we have pointer-events.

This property gives us the ability to choose what areas on an element, or if it’s a parent inside it, triggers a click event. It is a great way to conditionally allow functionality and just limit the scope of interactivity to only where you see fit.

Looking more in-depth, here are the available options you have. Take note, however, there are some values that are experimental for HTML elements and are available more stable on SVGs.

• auto: Default behavior. Element will act as if no pointer events value is set.
• none: Removes ability for element to be the target of a click event. Removing interactivity.
• visible(HTML Experimental): Only areas with visibility set to visible will be allowed to have interaction with click events and mouse hovers
• visiblePainted(HTML Experimental): Targets an area internally on an element where content is present. In SVGs, this would require fill or stroke being set to something other than none. Only allow interactions when visibility is set.
• visibleFill(SVG Only): Targets only areas on a SVG for the interior. Fill does not need to be set.
• visibleStroke(SVG Only): Targets only areas on a SVG for the perimeter. Stroke does not need to be set.
• visible(HTML Experimental): Allows for the perimeter and interior to be targted for interactivity.
• painted(HTML Experimental): Allows for the interior and perimeter of an element to be targeted when content is present, or fill and stroke is set to anything other than none.
• fill: Allows for the interior of the SVG alone to be targeted, regardless of values.
• stroke: Allows fo the perimeter of the SVG alone to be targeted, regardless of value.
• all(HTML Experimental): Allows for the enterity of the element to be targeted, regardless of values.

Now, let look at some simple code examples illustrating a couple of these properties

.Element {
  width: 200px;
  height: 200px;
}

.Element--no-event {
  /* Removes interactivity */
  pointer-events: none;
}

.Element--visible-only {
  /* Only allow interactivity to visible areas only */
  pointer-events: visible;
}

.Element--all {
  /* Interactivity on every aspect of the element */
  pointer-events: all;
}