The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

.avoid-clicks {
  pointer-events: none;

While the pointer-events property takes eleven possible values, all but three of them are reserved for use with SVG. The three valid values for any HTMl element are:

  • none prevents all click, state and cursor options on the specified HTML element
  • auto restores the default functionality (useful for use on child elements of an element with pointer-events: none; specified
  • inherit will use the pointer-events value of the element's parent
Check out this Pen!

As demonstrated above, the prime use case for pointer-events is to allow click or tap behaviour to “pass through” an element to another element below it on the Z axis. For example, this would be useful for graphic overlays, or hiding elements with opacity (eg. tooltips) and still allowing text-selection on the content below it.

Points of Interest

  • “The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.” — Mozilla MDN
  • “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.” — David Walsh

Other Resources

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox

The support is a bit deeper in some browsers when used on <svg>, for instance, IE 9 supports that.


  1. User Avatar
    Cabe Branson
    Permalink to comment#

    This works great for disabling hover/active states on disabled buttons and form elements.

    • User Avatar
      Permalink to comment#

      but right click is working still

    • User Avatar
      Permalink to comment#

      @deepak – “what’s a right click?” –Mac users for 20 years.

      Right-clicking is a mouse action, but not a pointer-event. The HTML api for the DOM doesn’t define an “onrightclick” event and there is no native listener for the event. The closest match for handling right clicking is the newer context menu api for the popup menu, but this is not directly a result of right clicking, as any keyboard key or interactive device can be set to open the context menu.

    • User Avatar
      Permalink to comment#

      @Tony – brush up on your JS knowledge. Right click is natively handled via onclick where event.button == 2 – see https://developer.mozilla.org/en-US/docs/Web/Reference/Events/click . And don’t brag about being a Mac user for 20 years, it’s like you’re asking for sarcasm ;)

    • User Avatar
      Permalink to comment#

      Remember you already can edit de text on inputs by pressing Tab key and… just typing =D.

      You must have to disable states on form elements and set readonly=”readonly”…

    • User Avatar
      Random Joe
      Permalink to comment#

      Unfortunately these tricks are ineffective if you if you have “hover CSS” inside the SVG file.

  2. User Avatar
    Permalink to comment#

    The only issue I have with it for links is it doesn’t display a link’s Title on hover.

  3. User Avatar
    Carlos Machado
    Permalink to comment#

    There is a mismatch between pointer-events and oncontextmenu

  4. User Avatar
    David Puerto
    Permalink to comment#

    Superb! Really need more time to experiment with SVG and this seems like a way better solution than mitigating event bubbles in JavaScript. I’ve noticed which Canvas you register click events on the container of a circle, but with SVG the circle is almost like a clipMask (or Mask in Flash). I’ve attempted to use clipMask in SVG and place the foreignObject inside of the clipMask only to discover that clipMask doesn’t accept the foreignObject.

    Does anyone have any ideas how you would add circular objects that rotate in a circle, inside of SVG where whatever is behind the outer edge of the circle is not registered as an event by the SVG above it? Think of like a rotary telephone with a switch on the side or something.

  5. User Avatar
    Permalink to comment#

    This will certainly be a handy way of allowing events to “pass through” elements, and for temporarily disabling pseudo states.

    But I’m struggling to see how it’s of much use for anything else.

    How, for example, would you implement drag and drop using pointer events, without also blocking scale and zoom gestures? It doesn’t appear to be possible.

    Microsoft’s suggestion is to set “touch-action” to either “pan-x” or “pan-y” — e.g. if it’s set to “pan-y” then vertical swiping scrolls the page, while horizontal swiping fires events you can use for drag and drop. So the drag action would only work if you did it horizontally.

    That might be acceptable for applications, where page scaling is disabled, but it’s of no use on web pages, where the scaling might be large enough that the page scrolls in both directions. And I don’t think it’s particular intuitive either way.

    Pointer events might be a useful high-level abstraction, but they’re no substitute for proper low-level touch events.

  6. User Avatar
    Philip Ingram
    Permalink to comment#

    hmmm, not what I expected…in this example it does not appear that it passes events to elements below the stacking order, nor z-index, as this article suggests so this is useless of you have a full viewport overlay and wish to interact with elements below (underneath) it. Am I reading this wrong?

    http://codepen.io/pingram3541/pen/hvtFH (try clicking on div.two “through” div.four) it doesn’t work nor does it show the hover state for the anchor. Example has both an inherit anchor as well as js event handler.

  7. User Avatar
    Philip Ingram
    Permalink to comment#

    I take that last post back, partially…I can’t believe I did this as I almost never use IE except for testing for the stuff it breaks…but sure enough I was using IE when I built the codepen lol. The css rule works on webkit. =)

  8. User Avatar
    Philip Ingram
    Permalink to comment#

    lol, wish I could edit my comments so as not to pollute this thread…

    Found a solution for IE, but it isn’t perfect…since the WC3 spec is for svg, if the overlay is defined as an svg, pointer-events are in fact passed through.

    And a possible js solution – http://www.vinylfox.com/forwarding-mouse-events-through-layers/

  9. User Avatar
    Musica clasica
    Permalink to comment#

    This line of CSS is great – can cancel links without touching PHP :
    “pointer-events: none;”

    I have used it to cancel top level link menu in WP.
    IF it affects also sub menus then put “pointer-events: auto;” on the sub menu CSS.

    Works great.

    • User Avatar
      Permalink to comment#

      Actually, it works on fixed elements. I have a fixed user bar with some icons in it (links to login and such). As a responsive layout the menu collapses into a fixed menu bar (transparent background) which is stacked above the user bar. The icons in the user were no longer accessible. By using pointer-events:none on the menu bar and pointer-events:auto on the menu items, everything works as expected, even through fixed elements.

  10. User Avatar
    Hassan Bazzi
    Permalink to comment#


    I was doing an overlay over a gallery, where I would display a magnifying glass on hover. The problem is that the overlay layer was taking precedence over the anchor, and the Foundation Clearing gallery I was using relies on what is clicked to identify the gallery content.

    pointer-events:none on the overlay div and it was all solved. :D

  11. User Avatar
    Permalink to comment#

    I’d much rather there be separate properties for “click-events” and “hover-events” so I could control them separately. After all a “pointer” isn’t even an event, lol. I guess touch-events could be broken into swipe-events and tap-events as well, but I’ve not found a use case for that, yet.

  12. User Avatar
    Permalink to comment#

    Are you sure this works on chrome for android?

  13. User Avatar
    Permalink to comment#

    This is great for pure css drop down menus! That css down arrow was bugging me. Thanks! http://codepen.io/kaela/pen/LAfEu

  14. User Avatar
    Permalink to comment#

    Your ending note about inline SVGs with this property in IE9+ just saved me a huge amount of time. Thanks for being thorough!

  15. User Avatar
    David Kuhn
    Permalink to comment#

    I found that this does NOT work with pseudo elements with IE11. I positioned the :after element over a select and tried to have the mouse click fall through to the select element, but it didn’t work using the after element. It does work with a regular span, so I just used that, but just a note if you are trying to use this on any psuedo-element.

  16. User Avatar
    Permalink to comment#

    tester tester tester tester tester tester

  17. User Avatar
    Usama Tahir

    Mouse events may not work but touch on mobile device for example Iphone ios will work. To disable touch on mobile devices you can use.

    -webkit-touch-callout: none;
  18. User Avatar
    Khajan Singh
    Permalink to comment#

    Are you sure !! this works for IE11 + Windows 7?

    Because, I tried to make that working but radio buttons were still active.

  19. User Avatar
    Permalink to comment#

    that’s an intersting css property, never see this before. I was fixing a bug and stumble across it. That was the problem by the way, lol!

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.