CSS pointer-events - disable click on an element

CSS pointer-events – disable click on an element

on Apr 18, 2016

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

<style type="text/css">
.disablemouse {
  pointer-events: none;
}
div {width: 100px; background-color:lightblue;}
</style>


<button class="disablemouse" onclick="alert('clicked')">Click Disabled</button>
<br><br>
<button onclick="alert('clicked')">Normal button</button>

refresh

try it online