Mozilla

pointer-events for HTML in Firefox 3.6

on December 1, 2009 by

in CSS Feature Featured Demo Firefox Standards SVG

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.

31 comments

Comments are now closed.

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

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

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

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

  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.

  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.

  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?

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

    This looks great, I hope it gets widely implemented.

  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?

  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.

  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. [...]

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

    Fantastic!

    And it already seems to work in Chrome 4 :)

  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.

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

    Webkit supports this feature too.

  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)

  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. [...]

  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?

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

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

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

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

  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!

  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 [...]

  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

  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/

  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.

  23. Pingback from 파이어폭스 3.6에서 HTML용 pointer-events ✩ Mozilla 웹 기술 블로그 on June 20th, 2010 at 8:28 am:

    [...] 원저자: Christopher Blizzard – 원문으로 가기 [...]

  24. David wrote on September 30th, 2010 at 10:05 pm:

    @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…

  25. mawrya wrote on October 4th, 2010 at 7:31 pm:

    @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.

    1. David wrote on October 4th, 2010 at 8:29 pm:

      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:
      $(‘.gradient’)click(function(e){
      var $this = $(this),
      x = e.pageX – $(document).scrollLeft(),
      y = e.pageY – $(document).scrollTop();

      $this.hide();
      var lowerElement = $(document.elementFromPoint(x, y));
      $this.show();
      lowerElement.trigger(e);
      });

  26. 1000 game mobile wrote on January 4th, 2011 at 3:34 am:

    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

  27. miukki wrote on April 27th, 2011 at 6:58 am:

    what about IE7+ ?

  28. miukki wrote on April 27th, 2011 at 6:59 am:

    and what about transparent gradient in IE in css?

  29. Pingback from CSS3 pointer-events özelliği / Fatih Hayrioğlu'nun not defteri on December 7th, 2011 at 3:01 pm:

    [...] http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/ [...]

  30. Pingback from CSS3 pointer-events özelliği · Lodos Lodos2005 Zamanı Bekleyen Kollayan Bir Ademoğlu on December 7th, 2011 at 3:57 pm:

    [...] http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/ [...]

Comments are closed for this article.