Question

84

Disable onclick with CSS :: Possible?

rated 0 times [ 90] [ 6] / answers: 1 / hits: 100903 / 12 Years ago, thu, july 12, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

carolyn

Add To Favorites

Follow

Total Points: 618

Total Questions: 119

Total Answers: 86

Location: Saint Pierre and Miquelon

Member since Fri, Jan 28, 2022

2 Years ago

answered 12 Years ago ellisw · Accepted Answer

Add some Javascript to your btnCopy function to check if the parameter-element has the disabled class or not.

Using CSS to alter the behavior of JavaScript is not possible. CSS is for styling HTML elements, JavaScript is for handling the behavior of events and the site. CSS and JavaScript are two very different things. The only thing that is possible with CSS is to prevent a user from clicking on an input (button for example). With the CSS solution, you are not disabling the code in the onclick event. You are only disabling the user's ability to trigger the onclick event.

However, there are many ways to alter stuff on a page (using even more JavaScript or with some plugins for your browser), which could make it possible to click on the button despite your CSS pseudo-element. That is why using CSS for this is not recommended.