CSS3 Gems: The pointer-events Property

Contributing Editor

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Adrian Gallardo

    It’s a usefull feature, but in the example you can still drag the map from black areas, near the “telescope”.. It would be nicer if you could control that with some option of the property, ie: pointer-events: opaque (to capture events only in opaque areas). Thanks for the post!

    • http://www.optimalworks.net/ Craig Buckler

      The only reason you can’t do that is because the map edge extends to the edge of the circle. If I’d made the map cover the whole page it’d work fine.

  • javadecaf

    My concern with this, as with other CSS3 properties, is support in IE. When is Microsoft going to get with the program? XP & Vista users won’t even be able to get IE10, which is going to delay full CSS3 implementation even longer. If IE is not supported, most of CSS3 isn’t good for much more than “extras” – functional elements of a design cannot depend on it without some kind of JS shim, and even then a small percentage of users without JS are out in the cold. I would be interested to know what other developers are thinking/doing about this problem.

    • http://www.optimalworks.net/ Craig Buckler

      In this particular case, I agree that it may be difficult to use this feature without IE support. You could make essential controls unusable.

      However, the majority of CSS3 properties can be used without problems. IE will degrade gracefully.

  • http://reactivo.es Diego

    You can replicate the behavior in IE using the propietary filter “AlphaImageLoader”:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’your_transparent.png’, sizingMethod=’scale’);
    background:none !important;

    http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements