Click through elements – pointer-events: none;

pointer-events is a CSS property specific to SVG. It was originally proposed to be included for non-SVG elements in the CSS3 specification, but was later moved to be included in the CSS4 specification.

I will be focusing on pointer-events: none; for this particular article. Using this property gives web developers the opportunity to easily disable links on a page, and even allows users to click on elements underneath elements which would normally obscure them!

I will also cover a few problems that using pointer-events: none; can introduce to a project.

Click through elements with CSS

The preceding two groups of elements are created with the same markup:

  

    [link text]
    

  

The only difference being that div.cover on the right has the following css applied to it:

div.cover { pointer-events: none;}

As you can see, the button on the left is obscured by div.cover. The cursor changes to the default, while preventing an event from being captured on the link, when hovering over the obscuring div. div.cover on the right, however, with pointer-events: none; allows the user to hover anywhere over the link, while clicking through the element it is obscured by!

Disabling clicks on menu items entirely

The above menu has the following basic markup:

• item 1
• item 2
• item 3
• item 4 (current)
• item 5

with pointer-events: none; applied to the menu item referring to the current page:

li.current > a { pointer-events: none;}

This has a two-fold effect:

1. the cursor is automatically returned to its default state when hovering on the affected link;
2. the link is now disabled from receiving click events i.e. no page load occurs should the user attempt clicking the menu item.

Clicking through elements is very cool, and adding pointer-events: none; to menu items can save a couple lines of CSS, but there are a few things that need to be addressed before using this property.

Caveats in applying pointer-events: none;

The SVG spec states:

The ‘pointer-events’ property specifies under what circumstances a given graphics element can be the target element for a pointer event.

Thus, development tools such as Chrome Dev Tools, Firebug, and Dragonfly will not open the DOM tree to the element you inspected should it have this property applied to it.

Querying the DOM, say with jQuery, will return an empty object! Make sure you understand the consequences for both yourself, and the people who may continue to work on your project in the future!

pointer-events browser support

Browsers supporting the pointer-events property on non-SVG elements at the time of writing:

• Chrome 2.0 +
• Firefox 3.6 +
• Safari 4.0 +

Mobile browser support is currently unknown.

Takeaways

pointer-events is an experimental property that provides developers with new and interesting options for users to interact with elements on a webpage. Beware, however, as this property can introduce problems in debugging, and querying DOM elements.

Further reading

• The pointer-events spec by the W3C
• Pointer-events on MDN

You should follow us on twitter by clicking here.