Javascript 使用CSS禁用onclick：：可能吗？

我想用CSS禁用

onclick

事件。可能吗

假设我有

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

我想关闭此元素的onclick事件，因此

onclick=“btnCopy（this）；”

将不会处于活动状态

并删除“禁用”类

---

它将恢复正常，因此，

onclick

事件将处于活动状态。

如果您使用javascript添加和删除类，那么为什么不直接使用它来启用和禁用单击事件呢？

这是一种黑客行为，但我建议使用伪元素：

在具有禁用类的按钮上，可以创建一个覆盖该按钮的伪元素，使其不可单击

但是使用javascript更有意义，因为您已经在使用它来添加和删除类

编辑：完全不推荐，但现在您可以：

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

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

---

向

btnCopy

函数添加一些Javascript，以检查参数元素是否禁用了

类

使用CSS改变JavaScript的行为是不可能的。CSS用于设置HTML元素的样式，JavaScript用于处理事件和站点的行为CSS和JavaScript是两种完全不同的东西。CSS唯一可能的事情是防止用户点击输入（例如按钮）。使用CSS解决方案，您不会在onclick事件中禁用代码。您只是在禁用用户触发onclick事件的能力

然而，有很多方法可以改变页面上的内容（使用更多的JavaScript或浏览器的一些插件），这使得在CSS伪元素的情况下单击按钮成为可能。这就是为什么不建议对此使用CSS的原因。
如果您想添加或删除“已禁用”的类，您最好在事件处理程序中检查该类，而不要执行任何已禁用类的it元素。

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


这必须用Javascript来完成。一个
if（indexOf（'disabled'）==-1）
应该可以做到这一点。
一种纯粹通过CSS实现的方法是在悬停时显示一个不可点击的不可见覆盖

演示：
在某些浏览器中，您可以设置
指针事件：无
，但这会禁用所有鼠标事件，而不仅仅是单击。请参阅：
通过添加这行javascript，可以使用javascript禁用按钮
onclick
事件

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

最好的选择可能是使用jQuery并检查btnCopy是否具有“disabled”类

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

祝你好运
 你可以这样做

pointer-events: none;
cursor: default;

更多

（请注意，这是不可访问的；它不会禁用对元素的制表符并按“Enter”；在这种情况下，事件仍将触发。）
这是引导程序的工作方式

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

您可以只保留
光标：不允许如果不需要重置样式，则删除它们
不透明度：0.65；过滤器：α（不透明度=65）；盒影：无
CSS用于对元素进行分类，而不是对事件（除了：hover stuff）作出反应（或不作出反应）。您可以使用html
禁用
属性
：hover
也不是事件。这就是我现在正在做的，但是。。。很高兴能有一些整洁的CSS..正如MarcB在回答您的问题时所说的：CSS是用于设置元素样式的，而不是用于处理事件。除了CSS，你无法获得更多，除非你使用hackish解决方案buy Guy Fawkes添加一个覆盖按钮的不可点击的伪元素（我想我们都不会推荐）@Ωmega当它打算用JavaScript处理类似的事情时，为什么要用CSS呢？以它应该被使用的方式使用CSS，以它应该被使用的方式使用JavaScript，不是更好吗？@SimonAndreForsberg-我现在是这样做的，但我希望用CSS以一种简洁快速的方式来做，因为在每次onclick中检查类是一种古老的方式：）而fast的意思是每次单击时节省0.00000001毫秒？因为一旦我设置了
onclick=“”
，我就不知道以前有什么了。。。我想批量启用/禁用按钮@Ωmega只是在javascript中有一个标志，并在javascript中的onclick事件中检查变量是否为true/false。否则只需使用css disabled属性。只需添加，就不好看了。最好在事件处理程序内部执行，或者在中间有一个函数进行检查。此外，简单地使用类名上的索引文件将匹配“NoBube”类，如果在元素上存在这个错误。这种方法有什么不对吗？它仅使用CSS伪事件来实现此目的。。甚至没有JS..谢谢，但是我不想在里面使用
input
元素，原因还有很多，其中一个就是focus…Ok。但是输入被禁用，所以它永远无法获得焦点。还有其他原因吗？（出于好奇，这样我可以学到一些新的东西：）添加一个伪元素，在其中您可以使用JavaScript来完成它（这是它的目的，用来处理行为）没有多大意义@Ωmega它并不完全受支持，它只是CSS所支持的东西的副作用。我更新了我的答案，提供了关于JavaScript vs CSS解决方案的更多细节禁用时，代码>返回到原始状态？我需要批量打开/关闭禁用类，以获取更多元素。我不想为单独一行中的每个元素设置
onclick
。
指针事件设置为
none
时，光标将被忽略。这似乎是一个风险修复，因为它不仅禁用单击，而且禁用所有指针事件（如悬停）。从2018年起完全支持！改变答案？
pointer-events: none;
cursor: default;

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