Disable onclick with CSS :: Possible?

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


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.


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/


You can do this.

pointer-events: none;
cursor: default;

more here


It's hackish, but I would suggest using pseudo-elements:

On a button with a disabled class, you could create a pseudo-element covering the button so it's not clickable.

But it'd make more sense to use javascript since you're already using that to add and remove classes...

EDIT: Not recommended at all, but here you go:

#btnCopy {position:relative;z-index:1;}

.disabled:before {
  content:" ";
  display:block;
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:10;
}

If you are using javascript to add and remove class then why not just use it to enable disable the click event?


This is how Bootstrap do it.

.btn.disabled, .btn[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    box-shadow: none;
}

You can just keep cursor: not-allowed; and if you don't need reset of the styles then you remove them opacity: 0.65; filter: alpha(opacity=65); box-shadow: none;


If you want to add or remove the class "disabled" you may as well check for this class in your event handler, and than do nothing it element has class disabled.


You can use javascript to disable the buttons onclick event by adding this line of javascript.

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

The best option is probably to use jQuery and check if btnCopy has the 'disabled' class.

if(!$('btnCopy').hasClass('disabled')){
   //Add code to copy text here
}

Good luck!


<div id="btnCopy" class="button" 
    onClick="if(this.className.indexOf('disabled') == -1){btnCopy(this);}">
    <img src="copy.png">
</div>

it would have to be done with Javascript. An if(indexOf('disabled') == -1) should do the trick.


One way of doing it purely via CSS is displaying an unclickable-invisible overlay on hover.

Demo: http://jsfiddle.net/FNVmh/1/


Need Your Help

How to pipe stdout while keeping it on screen ? (and not to a output file)

bash shell pipe output stdout

I would like to pipe standard output of a program while keeping it on screen.