CSS property pointer-events can be used enable/disable (default is enabled) mouse events on an element. If pointer-events is none for an element, the click event will be passed through it to next eligible element below it.
CSS property pointer-events
CSS version:
CSS 4
Value:
auto | none | inherit
Initial:
auto
Applies to:
all elements
Inherited:
yes
Note that pointer-events also have many other values (visiblePainted, visibleFill) which are relevant for SVG. We’ll not cover those in this tutorial.
Example – pointer-events none
<styletype="text/css">.disablemouse {
pointer-events: none;}
div {width:100px; background-color:lightblue;}</style><buttonclass="disablemouse"onclick="alert('clicked')">Click Disabled</button><br><br><buttononclick="alert('clicked')">Normal button</button>