pointer-events, a property I wish we had now.

December 1st 2009

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.

The pointer-events CSS property basically specifies if the mouse event should be sent to the current element, or the element underneath it. Might not look very useful at first, but it makes a whole lot of sense when you’re working with “complicated” designs.


Real world example

Lets say you have that fairly simple design, a content area and a sidebar. The content area has a drop shadow that goes over the sidebar area. Something that look like the following.

design_drop_shadow

The problem with the design is that in order to display the shadow over the sidebar, you have to bring it’s z-index up and since it goes a bit over the sidebar, there’s a small part of the content area that goes over the link and blocks the click. See below outlines in yellow.

design_drop_shadow_sizes

Up until now, you really didn’t have much choices. In order to enable the click on the link, you’d have to include the shadow as a background image in the sidebar. The content area wouldn’t go over the sidebar anymore, but the drop shadow would’nt be over the content as the designer intended it to be.

Well with the pointer-events, you just have to see the value to “none” in the CSS and that means any click event sent on that element will automatically go to the element underneath it, in that case, the link in the sidebar.

.content {
  pointer-events: none;
}

What now?

Unfortunately, this isn’t part of any CSS specification (yet). Mozilla decided to implement it in Firefox 3.6 and they are the only one right now. However, that’s a nice step forward and I really do hope others starts implementing it, because it’s really small, but can save quite some time in the long term.

14 Responses to “pointer-events, a property I wish we had now.”


  1. よく書かれたブログの記事をそれを維持します。私はこのブログ&#038に常にチェックするために使用されます。イムはとてもインスピレーションを得ました!非常に有用な情報、特に最後のいくつかの文章。私は実際にそのような情報を必要としています。私は非常に長いため、この特定の知識を探しているために使用されます。 Thankx&がんばろう。

  2. “The content should be getting fact and common way of writing. The sources must be reviewed and then add with good pages for that content. You can get the marvelous essay sources and shared content from online. Most of posts are getting duplicate words. The sources of writing are to be produced by the excellent writer. The description should be based on common things and related to the main title. Reduce the shared information and find the quality resources from different sources”

  3. DavidMatthew says:

    The Pointer Events particular is the way that, regardless of attempting to give a comprehensive occasion taking care of model for a wide range of pointing devices, it doesn’t cover consoles and console like interfaces. assignment Service | AssignmentEmpire

  4. Know about where are all apps in windows 10 online.

  5. Get tutorial for how to play dvd in windows 10 completely free of cost.

  6. Akii12 says:

    Hi guys if you are now connect the more user are apply the more user are enjoy the more use of them some function fix connections bluetooth audio devices wireless displays windows 10 mobile there are more user are enjoy the best uses of the website and enjoy the new user are apply the same function.

  7. happy wheels says:

    The article gives me lots of useful information. Help me expand my knowledge. Thanks for sharing this great article.

  8. berriosus says:

    Information very valuable thank you for sharing the information.GoMovies

  9. luna Smith says:

    I think you must be aware of the intricacies of this business, though one recommendation would be to find out a niche for your event planning business and try to be the best in it. High-end weddings, musical events, fashion shows, sea shore events, corporate business retreat, convention, promotional events, book fair, technology shows, are some of the niche markets you can choose from, or anything of your area of interest Essay help online UK.

  10. majece majece says:

    It will be useful for college students to learn more about writing a report. On https://pro-academic-writers.com/blog/how-to-write-a-report you can get some info about it

  11. David Brad says:

    Assignment Help on Web is an online assignment help service that has a plethora of excellent qualities which make it shine in this highly competitive space. 24/7 customer service, unlimited revisions, privacy protection, adherence to guidelines and experienced staff are just some of those.
    UK Assignment Help Online

  12. vex says:

    The article you share here is great. I really like and appreciate your work. I read your article deeply, the points you mentioned in this article are very helpful thanks for sharing.

  13. michael cormier says:

    We pave the way for success and help our clients achieve their desired position in the tech world. We offer up a wide array of digital solutions and effective strategies to help jet start or revamp their businesses in a creative approach. Logo Designers San Francisco

  14. Shi Chu says:

    We are a leading Precision parts suppliers , we’re offering a wide array of manual machines that can be highly used for R&D purposes and secondary operations whenever needed.

Leave a Reply