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.


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.


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.

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

  15. michaelmjones says:

    Your article is great and I really like that and appreciate your efforts and it can be helpful for the students like the way uk assignment help is well you shared some nice and important points too really you did hard work on your article.

  16. voucher pro says:

    So, what are you looking forward to? Avail all of their top best products and services by using the usage of the ASDA asos discount code today from Voucher Code.

  17. Vincent T. Thompso says:

    Good information, very helpful.Street View Online

  18. minklo says:

    Thanks for sharing such a great information with us. Your post is unique and all information is trustworthy for new readers. Please keep it in the future, thanks for sharing such helpful article. Please continue to uphold.
    fireboy and watergirl

  19. chrisgail says:

    “Everyone has wish about the property but I do not like it because I am not ready and I like to serve the students in writing their assignments dissertation proposal writing services ”
    cheap dissertation writing service

  20. Purchase the best fitness trackers band under 5000 Having a fitness band makes your workouts easier and on point.

  21. Jaime Manna says:

    Thanks to the author for this perfect update. I have a site on which I connected the pretishare and also faced this problem. I was already thinking of disallowing clumsy animations with embedded script code so that people would not see it at all. But your way is much simpler and more humane. By the way, why don’t you post such life hacks on your facebook? The audience is much larger there. I found about a dozen posts on a similar topic and they all had almost 65 thousand likes! I am sure their authors used http://soclikes.com to buy likes.

  22. abhi khurana says:

    Gift your superhero a unique gift with some thoughtful gift item. Buy gifts for your parents, gift for grandpa, gifts for your brother etc. gifts for sister

  23. sanjupawar says:

    Get trending, upcoming, latest, top most news about India. Also get to which web series is going to release in India. trending news in india

  24. asleypatricia says:

    That’s great news Mozilla announced, now the Mozilla organization starting to support the pointer-events or touch event in Mozilla Firefox 3.6 and this is an amazing response by the Mozilla Corporation. I used this change in my Reliable Assignment Writing Services for finding the technical and difficult answers. This change is active and also useful for any HTML element.

  25. think box says:

    Nice article, I really appreciate your efforts. it is very helpful for me. so thanks for sharing and keep sharing this informative material. production houses in Pakistan

  26. anna says:

    good efforts. thanks for sharing. i really appreciate your efforts. so please sharing such an amazing information. yoga for sinus drainage

  27. Ahmad says:

    it is helpful for me. It is informative. I think you are the best blogger. so thanks for sharing informative article. yoga for sinus drainage

  28. Thanks for proffering solutions through this blog to the public. I found what I have been looking for. Thanks a million. Checkout Why Was Gulder Ultimate Search Stopped

  29. Michael Clark says:

    This is an amazing update. Does this also apply while creating a logo using a custom logo design tool

Leave a Reply