CSS pointer-events ============= CSS' pointer-events property effectively disable an element when the value is none but otherwise allow the element to function per usual when the value isn't none. Pointer-events even prevent JavaScript events from firing. Click on that element and any addEventListener callback you've placed on the element will n…

gistfile1.css

.disabled { pointer-events: none; }

CSS pointer-events

CSS' pointer-events property effectively disable an element when the value is none but otherwise allow the element to function per usual when the value isn't none. Pointer-events even prevent JavaScript events from firing.

Click on that element and any addEventListener callback you've placed on the element will not fire. A perfect property, really -- you don't need to do a className check before you decide whether or not to fire something based on class presence.

• If children of the element have pointer-events explicitly enabled, clicks will be allowed on those child elements.
• If you add a click event listener to an element, then remove the pointer-events style (or change its value to auto, the click event will fire the designated functionality. Basically, the click event respects the pointer-events value.

http://davidwalsh.name/pointer-events