CSS pointer-events – disable click on an element

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

Specification and Browser compatibility

SpecificationStatusCategories
CSS pointer-events (for HTML)CSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 4+ Yes 3.6+ Yes 11+ Yes 12+ Yes 4+ Yes 15+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 3.2+ Yes 11+ Yes 33+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments