Disable onclick with CSS :: Possible?

Question

I would like to disable onclick event with CSS. Possible?

Let's say I have

<div id="btnCopy" class="button" onclick="btnCopy(this);"><img src="copy.png"></div> 

and by adding class "disabled"

document.getElementById("btnCopy").className += " disabled"; 

I would like to turn off onclick event for this element, so onclick="btnCopy(this);" would not be active.

And by removing "disabled" class

document.getElementById("btnCopy").className =    document.getElementById("btnCopy").className.replace(/(?:^|\s)disabled(?!\S)/, ''); 

it would go back to normal, so onclick event will be active.

Answer 1

You can do this.

pointer-events: none; cursor: default; 

more here

(Note that this is not accessible; it does not disable tabbing to the element and pressing "Enter"; the event will still fire in this case.)

Answer 2

In some browsers you can set pointer-events: none, but that disables all mouse events not just clicks. See: https://developer.mozilla.org/en/CSS/pointer-events/