Pointer events

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:

none prevents all click, state and cursor options on the specified HTML element
auto restores the default functionality (useful for use on child elements of an element with pointer-events: none; specified
inherit will use the pointer-events value of the element’s parent.

It is not supported by IE. You can use “disabled property” to work similar like pointer events.