UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
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:
noneprevents all click, state and cursor options on the specified HTML elementautorestores the default functionality (useful for use on child elements of an element withpointer-events: none;specifiedinheritwill use thepointer-eventsvalue of the element’s parent
As demonstrated above, the prime use case for pointer-events is to allow click or tap behavior 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.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 3.6 | 11 | 12 | 4 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 115 | 115 | 2.1 | 3.2 |
The support is a bit deeper in some browsers when used on <svg>, for instance, IE 9 supports that.
This works great for disabling hover/active states on disabled buttons and form elements.
but right click is working still
@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.
@Tony – brush up on your JS knowledge. Right click is natively handled via
onclickwhereevent.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 ;)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”…
Unfortunately these tricks are ineffective if you if you have “hover CSS” inside the SVG file.
I’ve tested the above demo in IE11 and it works. Woohoo!
It works, but note that; inside an element where pointer-events have been set to
none, for IE11 to take notice of apointer-events: auto, the target element must also have a CSSpositionother thanstatic:Ref: https://coderwall.com/p/s8pjpg
@RK – Thank you kind sir
The only issue I have with it for links is it doesn’t display a link’s Title on hover.
There is a mismatch between pointer-events and oncontextmenu
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.
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.
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.
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. =)
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/
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.
It seems it’s does’nt work on fixed elements…..
http://www.cybertechquestions.com/position-fixed-element-not-passing-through-pointer-event-click_87096.html
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.
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
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.
I second this motion ^_^
Are you sure this works on chrome for android?
K, i found the workaround:
http://stackoverflow.com/questions/21474722/touchmove-pointer-events-none-css-doesnt-work-on-chrome-for-android-4-4-chro
This is great for pure css drop down menus! That css down arrow was bugging me. Thanks! http://codepen.io/kaela/pen/LAfEu
Your ending note about inline SVGs with this property in IE9+ just saved me a huge amount of time. Thanks for being thorough!
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.
tester tester tester tester tester tester
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.
Are you sure !! this works for IE11 + Windows 7?
Because, I tried to make that working but radio buttons were still active.
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!
I spent over an hour trying to figure out how to prevent a hover event until I came across this article.
I’m continually challenged by interesting designs and finding new ways of using CSS.
pointer-events: none;
Is now another tool in my belt.
Thank you.
Nice, I’ve used pointer-events to disable triggering product image lightbox when clicked on woocommerce products. Does the trick
“none prevents all click, state and cursor options on the specified HTML element” could perhaps use better wording. The
focusstate event will still be triggered by tabbing to the element, for example.Chris Coyier Thank you so much!