CSS pointer-events

Pointer-events is something that originally stems from the SVG world and is already present in a number of web browsers. However, it is now also available for any HTML element with the help of a little CSS. The property is called pointer-events (duh), and basically you can set it to auto, which is normal behavior and none, which is the interesting value.

Applying it to an element

If you have set the CSS of an element to pointer-events: none, it won’t catch any click on it at all, but instead just let the event fall through to the element below it. Like this:

Web browser support

Pointer-events are supported in Firefox 3.6+, Safari 4 and Google Chrome so far. I feel certain Opera will catch up soon, too – with IE, I have no idea if they plan to support it or not.

A little demo

I’ve put together a little demo of pointer-events in action, where you can test it out yourself. As you can see, the grey box on the right-hand side prevents clicks on the links below it. However, if you click the checkbox to disable pointer events for it, they will instead be triggered on the underlying links.

Real-world case

If you go to the start page of Twitter, and not being logged in, you will see a number of tags listed at the bottom. On the right side, they have an element with a faded image as an overlay to create that effect, but unfortunately the links below aren’t clickable. If they were to add only one line of CSS, it would be…

Now, if you have a need for this, now you have a very simple solution. 🙂

49 Comments

I'm not sure that this CSS feature is sensible for developers to use. First up, it seems like a gludge to get around a badly designed page or layout (i.e. z-index is wrong), but the worst case is that non-edge browsers (Safari 3, Firefox 3.5) and IE don't get access – and it just looks like the site is broken. For example, in Twitter's case that you raised: it's broken.

Agreed. Probably an inheritance from the SVG world, whereas it would probably fit better in JavaScript.

Remy,

Hmmm. Well, philosophically, I agree, but don't you think there's cases where design has won over code/interaction (like Twitter), where this will pose a solution in line with progressive enhancement (sort of, at least)?

@Gerben: Anyone who wishes to such things should use FireFox+Web Developer.. and then it's just Ctrl+Shift+S to go crazy with the copying. Alternatively a Grease Monkey-script/user style sheet to globally disable that property if it gets out of hand.

Unfortunately, this solution still doesn’t seem to work on Opera, only Firefox and Webkit browsers.
It’s a nice hack but I was hoping to find some javascript solution to allow event propagation.

It’s too bad, if it were at least compatible with IE it could help building some really nice things. I have to do something like a clickable hotspot system over an image and it would have been easier to have all those spots inside a removable div and still keep all the event listeners binded to the image behind it.

I have a glass pane over my form to prevent clicks during a long process but I would like to allow clicks on one button (cancel) but no others. How can I determine what is underneath and pass the click through only when over my desired button?

I disagree that this has no place. I found a great use for it in a hover zoom application. The zoom window follows the mouse cursor as you move across an image. If you jerk the mouse too fast it thinks you have moved off the image because the mouse updated faster than the div could move and the mouse starts hovering over the div of the zoomed image.

Using pointer events the zoom box that follows the mouse can ignore pointer events and this issue goes away.