CSS pointer-events

By  on  

The responsibilities taken on by CSS seems to be increasingly blurring with JavaScript. Consider the -webkit-touch-callout CSS property, which prevents iOS's link dialog menu when you tap and hold a clickable element. The pointer-events property is even more JavaScript-like, preventing:

  • click actions from doing anything
  • the default cursor pointer from displaying
  • CSS hover and active state triggering
  • JavaScript click events from firing

One CSS property is capable of doing just that!

The CSS

The pointer-events property can have many values, but many of them are only applicable to SVG*: auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, and inherit. The none value prevents the click, state, and cursor actions:

.disabled { pointer-events: none; }

A few quick notes about pointer-events:

  • If children of the element have pointer-events explicitly enabled, clicks will be allowed on those child elements.
  • If you add a click event listener to an element, then remove the pointer-events style (or change its value to auto, the click event will fire the designated functionality. Basically, the click event respects the pointer-events value.

I first noticed pointer-events used on the Firefox Marketplace website for disabled buttons. A bonus in this case is styleability; think about how awful elements with the disabled attribute look! Of course, don't use pointer-events on elements that could trigger critical functionality -- the style can simply be remove via the console!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Dijit’s TabContainer Layout:  Easy Tabbed Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content...

  • By
    MooTools, Mario, and Portal

    I'm a big fan of video games. I don't get much time to play them but I'll put down the MacBook Pro long enough to get a few games in. One of my favorites is Portal. For those who don't know, what's...

Discussion

  1. ab

    Nice feature, I didn’t know about it. A small remark: I was able to fire the onclick event in the demo page by tabbing into the link and pressing Enter; it looks like it does not ignore keyboard events, only mouse events.

    • Only dinosaurs are using their keyboards or even their tab key on internet pages. Younger developers don’t even know “Focus programming” anymore. Cheers, T-Rex.

    • Kate Radu

      @T-Rex That is simply not true. Keyboards and the ‘focus’ feature are still widely used among the accessibility community for interacting with the web. Unless you intend to be calling people with motor disabilities or visual impairments ‘dinosaurs’, in which case I think there’s a bigger issue at hand…
      Regardless, you are absolutely correct that setting CSS classes like

      .disabled { pointer-events: none; }

      will not ignore keyboard events. This is indeed an important consideration when developing for accessibility.

  2. I disagree to some extent with the idea of the article, though happy to see the actual functionality being publicized since it’s useful. It seems very much the domain of CSS to control whether something is intractable. This is absolutely the purview of CSS and it’s only even a question because this control has mostly been denied to the CSS component of implementation. JavaScript (should be) is responsible for describing what happens between the action and the outcome. Describing when a graphical element has no impact on functionality, and in fact should be entirely ignored by the application, seems to be directly the purview of CSS.

  3. actually whats the use of this feature…where can we use this feature can you please explain me…

    • One possible use is to disable pointer events of a absolute div with a transparent background above a scrollable area.

    • tone

      I use it to block scrolling on embedded maps on some pages where scroll wheels will get got on the map and start zooming. When I target the map with this, I can make it to where no the reader can’t click and zoom on it, and it is just there for a static reference.

  4. Devo

    What do u mean “the style can simply be remove via the command line!”. Is the cmd line refer to browser console ?

  5. Ole Jorgensen

    I testet it for disabling elements in an Div, just like you would disable input elements, it worked great and did the functionality I wanted. But IE is a bitch, I could not get it to work there.
    Have you got any insights on this, is it possible to get it to work in IE and did I just do something wrong?

  6. Chris Van

    Nice article. They’re awesomes, yes. Sadly, Opera doesn’t support `pointer-events` at all: http://caniuse.com/pointer-events

  7. Another extremely useful effect of this is that it helps speed up animations, especially those that are triggered on scroll.

  8. What is the quick solution for pointer-events to use in code. It will not good if any one use in code and it will work in IE. Is there any alternate to use that code to resolve issue in IE?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!