Grow your CSS skills. Land your dream job.

pointer-events

Last updated on:

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

Chrome Safari Firefox Opera IE Android iOS
Yep 4.0 3.6 15.0 11+ Yep Yep

Comments

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

    • Permalink to comment#

      but right click is working still

    • Tony
      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.

    • Mtz
      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 ;)

  2. Weaver
    Permalink to comment#

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

  3. Carlos Machado
    Permalink to comment#

    There is a mismatch between pointer-events and oncontextmenu

  4. 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. 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. 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. 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. 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. 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.

    • Paul
      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. THIS JUST SAVED MY LIFE.

    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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".