By Craig Buckler

CSS3 Gems: The pointer-events Property

By Craig Buckler
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

It’s becoming increasingly difficult to keep up with CSS3 advances. Just when you think you’ve seen everything, you discover an incredibly useful new property.

Consider the HTML problem when one element overlaps another. All the controls and links in the bottom element cannot be used or clicked. Sometimes that can be useful, e.g. to show a modal dialog. Sometimes it’s not.

Let’s consider a topical example. Say you just successfully landed a probe on the surface of Mars. But rather than analyzing boring rock samples or looking for primitive alien life, you decide to point your powerful telescopic camera back at Earth to view a popular sporting event (I realize it’s a little too late, but we’ll assume a space-time anomaly has opened, the distances appear far greater and you’re viewing recent history).

OK — convoluted example, but bear with me! In essence, the probe would see a map through a red-tinged telescope…

If we wanted to replicate this on a web page, we could use a map API from Google, Bing or any other provider and overlay the telescope graphic. Unfortunately, the map would become inoperable and you couldn’t drag or zoom because the controls are obscured by a transparent graphic.

pointer-events to the Rescue!

The default pointer-events setting is auto and the overlaid image would receive all mouse events even though it’s not waiting for any. However, setting it to none means that it will never be the target of mouse events. In other words, the map can be dragged and used as if overlay was not there.

View the CSS3 pointer-events Mars probe Olympic viewer demonstration page…

Try this in Firefox, Chrome or Safari and the map remains usable. IE and Opera don’t support HTML pointer-events so dragging and zooming will fail.

Setting pointer-events to none does not necessarily mean an element will never receive mouse events. If a child element permits capture, it will receive those events as they bubble up the parent chain.

In addition, pointer-events originated from SVG CSS where it offers several other options, e.g. stroke — the element can only receive mouse events when the pointer is over the stoke perimeter. SVG pointer-events are supported in all browsers, including IE9 and Opera.

For more information, refer to the MDN pointer-events documentation. I suspect you can think of many situations where the property would be useful.

Login or Create Account to Comment
Login Create Account
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?