There could be a number of reasons why the CSS pointer-events
property might not be working for you. You can check the following list of things to fix some common/potential issues with using it:
- Check for Browser Compatibility;
- Validate the Value;
- Prevent Keyboard Events When
pointer-events: none
Is Set; - Check if Parent has
pointer-events: none
; - Check for Overriding Rules.
Checking for Browser Compatibility
The CSS pointer-events
property has great browser support. However, before you check for other issues, it might be a good idea to ensure that you're using a browser that supports pointer-events
.
Validating the Value
Make sure that the value you are using for the pointer-events
property is valid — i.e. one of the following:
pointer-events: auto; pointer-events: none;
/* global values */ pointer-events: inherit; pointer-events: initial; pointer-events: revert; pointer-events: revert-layer; pointer-events: unset;
For SVGs, you may also use the following, additional values:
/* SVG only */ pointer-events: visiblePainted; pointer-events: visibleFill; pointer-events: visibleStroke; pointer-events: visible; pointer-events: painted; pointer-events: fill; pointer-events: stroke; pointer-events: all;
Preventing Keyboard Events When pointer-events: none
Is Set
Even though setting pointer-events: none
blocks "pointer" events (i.e., events triggered from interaction via mouse, touch, etc.), keyboard events can still trigger events (such as focus, blur, click, etc.) as usual. For example, this could be the case when:
- Navigating through elements using the TAB key (in which case the element with
pointer-events: none
will still be included in the tab order for sequential keyboard navigation, and it can receive focus); - Clicking an element using the SPACE key;
- etc.
However, you can still find solutions around these. For example, to prevent element(s) from being navigated to directly when using the TAB key, you can set tabindex="-1"
on that element:
<div id="parent"> <button id="child-1" tabindex="-1">Foo</button> <button id="child-2">Bar</button> </div>
In the example above, "child-1
" will not be navigated to when using the TAB key on the keyboard.
Depending on your specific use case, you can find workarounds for various other keyboard actions as well, or alternatively, you can always use JavaScript instead (as it is better suited to control this kind of behavior anyway).
Checking if Parent Has pointer-events: none
If you apply pointer-events: none
to a parent element, it will prevent any child elements from receiving pointer events, even if they are not explicitly set to pointer-events: none
:
<div id="parent"> <button id="child-1">Foo</button> <button id="child-2">Bar</button> </div>
#parent { pointer-events: none; }
If you try this example you would see that nothing will happen when you click on either of the button elements. This is because the parent <div>
will block all pointer events from reaching the child elements.
If this is the cause of your issue, then you can fix this by allowing pointer events on child element(s) by specifying the "pointer-events: auto
" style rule, for example, like so:
/* ... */ #child-1 { pointer-events: auto; } /* ... */
Please note that events will pass through the parent when the child explicitly allows "pointer-events
" (even if parent has pointer-events: none
set).
To prove that pointer events for child passes through its parent, you can add, for example, a click
event listener on the parent, like so:
document.getElementById('parent').addEventListener('click', function () { console.log('clicked'); });
You can try this code with the following HTML/CSS:
<div id="parent"> <button id="child-1">Foo</button> <button id="child-2">Bar</button> </div>
#parent { pointer-events: none; } #child-1 { pointer-events: auto; }
If you try the example above, clicking on "child-1
" will go through the parent and trigger event listeners on it (as appropriate).
Checking for Overriding Rules
You can make sure that the element you are applying the pointer-events
property to is not being overridden by a more specific selector.
For example, consider the following HTML/CSS:
<div id="parent"> <button id="child-1">Foo</button> <button id="child-2">Bar</button> </div>
#child-1 { pointer-events: none; }
It could be the case, for example, that another CSS selector with higher specificity is overriding your selector and re-enabling pointer events on the element, such as the following:
#parent #child-1 { pointer-events: auto; }
To fix this, you can either remove the more specific selector, or make your selector more specific than the other one.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.