The pointer-events CSS property has long been available as part of SVG as a way to control if a mouse event should be sent to the element directly underneath the mouse or passed through to an element underneath it. In Firefox 3.6 we’ve extended the property to allow it to apply to normal HTML content as well.

For SVG you can set the pointer-events property to one of several values, but for HTML you can only set it to one of two values: auto or none.

.foo {
  pointer-events: none;
}

When pointer-events is set to none, pointer events are passed through the target element and are instead sent to the element that is underneath it.

.foo {
  pointer-events: auto;
}

When pointer-events is set to auto, pointer events are handled normally. That is, the element blocks the events from being passed down to a lower element.

Here’s a real world example from Paul Rouget. You will need a Firefox 3.6 beta to see it in action.

Click the pointer-events: none checkbox under the image to see it change.

He’s replicated the tag list that’s on the front page of twitter.com. (Note: you have to not be logged in to see the tag list.) If you go and look at it on twitter you’ll notice that it fades off on the right hand side. This is done with a transparent, faded image that sits on top of the underlying box. The tags underneath are clickable links but the image blocks events from being sent to the ones underneath the fade.

What Paul has done is show how you can use the pointer-events property to allow you to click on the underlying links even with a fade on top of it.

22 comments

Post a comment

  1. Anton wrote on December 1st, 2009 at 9:20 am:

    This is so cool! It should have been part of CSS 1!

    Reply

  2. thorn wrote on December 1st, 2009 at 9:52 am:

    жжоте, чуваки!

    Reply

  3. Tobi wrote on December 1st, 2009 at 10:05 am:

    This is awesome. I asked for this css property because I really needed it for a project :D Paul you roock!! No I can make it!! Thank you! ps: Another reason why I love Mozilla.

    Reply

  4. Colin wrote on December 1st, 2009 at 10:08 am:

    Very nice addition. I’ve always liked how Flash can set ‘mouseEnabled = false’ to do the same.

    I take it we’ll still be using Javascript to simulate ‘mouseChildren = false’ in Flash? It stops event propagation being passed to child nodes of the clicked item underneath the cursor.

    Reply

  5. Simon Hamp wrote on December 1st, 2009 at 10:36 am:

    Brilliant! Is this part of the CSS3 spec? Will we see it adopted in other browsers?

    Reply

  6. Dethe Elza wrote on December 1st, 2009 at 11:14 am:

    This looks great, I hope it gets widely implemented.

    Reply

  7. jason wrote on December 1st, 2009 at 11:23 am:

    Perhaps this is a different discussion but why is this a style property and not a tag attribute?

    Reply

  8. jason wrote on December 1st, 2009 at 11:26 am:

    to self:
    So you can add to the presentation without interfering with the application.

    Reply

  9. Pingback from Forwarding Mouse Events Through Layers | VinylFox on December 1st, 2009 at 11:31 am:

    [...] Having the data that is dropped into the grid automatically insert into the grids rows at the correct position is my next task for the ever-improving DataDrop plugin. Should be fun :/ UPDATE (12-1-09): Seems that Mozilla has also noticed this issue. [...]

    Reply

  10. James John Malcolm wrote on December 1st, 2009 at 11:53 am:

    Fantastic!

    And it already seems to work in Chrome 4 :)

    Reply

  11. Rik wrote on December 1st, 2009 at 12:06 pm:

    Nice addition to the web platform..

    FYI, this is also supported by Safari 4 (maybe Chrome). There is also a very short spec : http://webkit.org/specs/PointerEventsProperty.html

    Now I wonder how long it will take for Twitter to add this on their site.

    Reply

  12. Robert O’Callahan wrote on December 1st, 2009 at 12:10 pm:

    Webkit supports this feature too.

    Reply

  13. Oliver wrote on December 1st, 2009 at 1:26 pm:

    If I recall correctly the pointer-event property has been supported in shipping Safari for more than a year now. The only reason the demo doesn’t appear to work is because it doesn’t include the webkit equivalents to the -moz- gradient stuff (so the gradient isn’t visible)

    Reply

  14. Pingback from pointer-events, a property I wish we had now. | Stéphane Caron – No Margin For Errors on December 1st, 2009 at 3:10 pm:

    [...] Mozilla announced it’d support pointer-events in Firefox 3.6. While the specification has apparently been part of SVG for a while, I never really heard of it before today. [...]

    Reply

  15. James John Malcolm wrote on December 1st, 2009 at 3:14 pm:

    And I take it “pointer-events: none;” won’t do anything to :focus events if used on links?

    Reply

  16. thinsoldier wrote on December 1st, 2009 at 4:07 pm:

    I prefer foreground:url(‘overlay.png’)

    Reply

  17. Murray wrote on December 1st, 2009 at 4:55 pm:

    Could this be used as another way to execute clickjacking attacks?

    Reply

  18. Marco Pivetta wrote on December 2nd, 2009 at 12:37 am:

    Amazing! That will really change the way we write CSS and Z-Indexes!

    Reply

  19. Pingback from Semonin Real Estate – Louisville and Elizabethtown, Kentucky – and … | Kentucky Real Estate on December 3rd, 2009 at 7:28 am:

    [...] pointer-events for HTML in Firefox 3.6 at hacks.mozilla.org [...]

    Reply

  20. Sam Hasler wrote on December 5th, 2009 at 8:20 am:

    For anyone interested, if you want the same effect in current browsers you can have to have the topmost element pass the events on to those below it. Here’s an example: http://jsbin.com/uhuto

    Reply

  21. Sam Hasler wrote on December 5th, 2009 at 9:08 am:

    Seems like there are better methods for forwarding mouse events through layers than the one I used above. See http://www.vinylfox.com/forwarding-mouse-events-through-layers/

    Reply

  22. mawrya wrote on December 8th, 2009 at 6:07 pm:

    Now, if only we could have events fire for both the upper AND lower elements together – that would be sweet. “pointer-events:catch-release;” or something like that.

    Reply

Add your comment