Should disabled elements ever have pointer events?

Question

Modern browsers have a CSS property called pointer-events which has a possible value of none. This value makes it so that no JavaScript listeners nor CSS pseudo classes fired by events (:hover, :active, etc.) have an effect.

To me, this makes sense to apply to disabled elements. However, this would mean that disabled elements would never have a different cursor like not-allowed.

Should disabled elements ever have pointer events? Or are some pointer events (like changing cursor on hover) useful for disabled elements?

Answer 1

From a UX perspective, there are things that could be done to help the user experience by not setting pointer-events to none. Showing disabled fields to a person is sometimes cruel. If the rules for why the field is disabled are complex and not obvious from the screen layout, it is like holding a carrot just out of reach of the person trying to use the system. I have seen some desktop apps that actually turn on field level help for disabled fields letting you know you have to do to allow the field to be enabled.

A not allowed cursor is probably not very helpful unless it is for a drop target using a drag and drop UI.

Answer 2

I would not use pointer-events:none; on a disabled button.

It's better to manually set the cursor and hover effect to the default/disabled state.

In some cases it's useful to add a tooltip to a disabled button; pointer-events none would disable this.

I've added a use case for pointer-events:none; below if your interested..

Pointer Event Use Example

---

It's generally used to allow interaction with elements behind the element it's applied to.

Here's an example I used pointer-events:none; on recently.

The magnifying glass icon is over a hyperlinked image, without attaching pointer-events:none; to the icon - the user would not fire the link if they clicked the icon.