pointer-events for HTML in Firefox 3.6

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.


  1. Anton

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

    December 1st, 2009 at 09:20
  2. thorn

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

    December 1st, 2009 at 09:52
  3. Tobi

    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.

    December 1st, 2009 at 10:05
  4. Colin

    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.

    December 1st, 2009 at 10:08
  5. Simon Hamp

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

    December 1st, 2009 at 10:36
  6. Dethe Elza

    This looks great, I hope it gets widely implemented.

    December 1st, 2009 at 11:14
  7. jason

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

    December 1st, 2009 at 11:23
  8. jason

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

    December 1st, 2009 at 11:26
  9. […] 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. […]

    December 1st, 2009 at 11:31
  10. James John Malcolm


    And it already seems to work in Chrome 4 :)

    December 1st, 2009 at 11:53
  11. Rik

    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.

    December 1st, 2009 at 12:06
  12. Robert O’Callahan

    Webkit supports this feature too.

    December 1st, 2009 at 12:10
  13. Oliver

    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)

    December 1st, 2009 at 13:26
  14. […] 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. […]

    December 1st, 2009 at 15:10
  15. James John Malcolm

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

    December 1st, 2009 at 15:14
  16. thinsoldier

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

    December 1st, 2009 at 16:07
  17. Murray

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

    December 1st, 2009 at 16:55
  18. Marco Pivetta

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

    December 2nd, 2009 at 00:37
  19. […] pointer-events for HTML in Firefox 3.6 at hacks.mozilla.org […]

    December 3rd, 2009 at 07:28
  20. Sam Hasler

    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

    December 5th, 2009 at 08:20
  21. Sam Hasler

    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/

    December 5th, 2009 at 09:08
  22. mawrya

    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.

    December 8th, 2009 at 18:07
  23. […] 원저자: Christopher Blizzard – 원문으로 가기 […]

    June 20th, 2010 at 08:28
  24. David

    @mawrya: actually, that’s what it does do. Events are captured by both elements.

    I wonder if this means that browsers will implement event handlers for table col elements, as we now have a way to let mouse events pass through the rest of the table structure. Been trying to figure out a way to do tooltips for table columns…

    September 30th, 2010 at 22:05
  25. mawrya

    @David: maybe I’m missing something, it doesn’t seem to work for me. If I modify this post’s example to display an alert() dialogue when the user clicks on the div with the gradient, and a different alert() dialogue when they click on a word underneath the gradient div, I can get one of the two dialogues to display depending on what “pointer-events:” is set to in css of the div, but there is nothing can do to get both dialogues to display when the user clicks on a pixel that is shared by both the div and the word below it. How would one accomplish that? As far as I know this isn’t possible when the elements that receive the events do not have a ancestor-descendent relationship in the DOM. I don’t believe this is even possible with pointer-events on SVG elements, where it would be even more handy.

    October 4th, 2010 at 19:31
    1. David

      Hmm. You’re right. Looks like I must have attached the onclick handler to the wrong element.

      The only way I know how to do what you want is to use elementFromPoint().

      eg with a bit of jQuery:
      var $this = $(this),
      x = e.pageX – $(document).scrollLeft(),
      y = e.pageY – $(document).scrollTop();

      var lowerElement = $(document.elementFromPoint(x, y));

      October 4th, 2010 at 20:29
  26. 1000 game mobile

    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)
    that good

    January 4th, 2011 at 03:34
  27. miukki

    what about IE7+ ?

    April 27th, 2011 at 06:58
  28. miukki

    and what about transparent gradient in IE in css?

    April 27th, 2011 at 06:59
  29. […] http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/ […]

    December 7th, 2011 at 15:01
  30. […] http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/ […]

    December 7th, 2011 at 15:57

Comments are closed for this article.