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.

One Response to “pointer-events, a property I wish we had now.”

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

Leave a Reply