CSS Pointer-events User Cases- 1 min
SVG Mouse Events
(Update: the codepen for this post was deleted)
Background: In the first svg, I grouped a star and text together, and I intended to add mouse hover event to this group as a rectangle just like a div.
The first thing is nothing happens if I move cursor into the rectangle area but not the shape or text. This is because I mistakenly perceive
<g> as something similar to
<div>, that is, everything inside the group will expand the area the group, but actually
<g> just logically group different svg elements together, there is no actual shape rendered for
The second thing is that even if the cursor is hover onto the star shape, nothing happens. The reason behind this is that, in SVG content, the default value for
visiblePainted, in my case, the
fill of the star is set to
none, thus the pointer events is not captured. To fix this, we can either set
pointer-events: all or
pointer-events: fill, that way the values of
visibility won’t affect events processing.
However, this works on most modern browsers, but it won’t work on IE9 or IE10, the workaround I used is to set
fill: transparent so that there is nothing rendered visually and the svg element can react to pointer events.
Another use case of
pointer-events is to implement a customized select.
appearance: none is working as we want, we usually need to add some custom arrow to complete this customized select, and set the custom arrow to
pointer-events: none, so that the element underneath it (which should be the select element) will catch the event as you can see in this post.
Generally speaking, the prime use case for pointer-events is to allow click or tap to “pass through” an element to another element below it on the Z axis.
Also, as described in this article,
pointer-events can be helpful to enhance performance while use scrolling the web page.