O'Reilly

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!

Track.js Error Reporting

Recent Features

Incredible Demos

  • Using Opacity to Show Focus with MooTools

    I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level....

  • Control Element Outline Position with outline-offset

    I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...

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.

  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.

  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.

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

Recently on David Walsh Blog

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...