How to Fix Issues With CSS "pointer-events" Property Not Working?

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:

1. Check for Browser Compatibility;
2. Validate the Value;
3. Prevent Keyboard Events When pointer-events: none Is Set;
4. Check if Parent has pointer-events: none;
5. 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.