3

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?

3

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.

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.

pointer event example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.