Question

我想用CSS禁用onclick事件。可能的？

假设我有

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

并添加班级“禁用”

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

我想关闭此元素的onclick事件，因此onclick="btnCopy(this);"不会处于活动状态。

删除“禁用”类

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

它将恢复正常，因此onclick事件将处于活动状态。

Answer 1

在某些浏览器中，您可以设置pointer-events: none，但这会禁用所有鼠标事件，而不仅仅是点击。请参阅：https://developer.mozilla.org/en/CSS/pointer-events/

Answer 2

你可以这样做。

pointer-events: none;
cursor: default;

更多here

Answer 3

向btnCopy函数添加一些Javascript，以检查参数元素是否具有disabled类。

使用CSS来改变JavaScript的行为是不可能的。 CSS用于样式化HTML元素，JavaScript用于处理事件和站点的行为。 CSS和JavaScript是两个非常不同的东西。 CSS唯一可能的做法是阻止用户点击输入（例如按钮）。使用CSS解决方案，您不会禁用onclick事件中的代码。您只是禁用用户触发onclick事件的能力。

但是，有很多方法可以改变页面上的内容（使用更多的JavaScript或浏览器的某些插件），这样可以在尽管使用CSS伪元素的情况下点击按钮。这就是为什么不建议使用CSS 的原因。

Answer 4

这是hackish，但我建议使用伪元素：

在具有禁用类的按钮上，您可以创建一个覆盖按钮的伪元素，使其无法点击。

但是使用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;
}

Answer 5

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

Answer 6

Bootstrap就是这样做的。

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

您可以保留cursor: not-allowed;，如果您不需要重置样式，则将其删除opacity: 0.65; filter: alpha(opacity=65); box-shadow: none;

Answer 7

如果你想添加或删除“禁用”类，你也可以在事件处理程序中检查这个类，而不要做任何事情，因为元素已经禁用了类。

Answer 8

您可以使用javascript通过添加此行javascript来禁用按钮onclick事件。

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

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

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

祝你好运！

Answer 9

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

必须使用Javascript完成。 if(indexOf('disabled') == -1)可以做到这一点。

Answer 10

纯粹通过CSS执行此操作的一种方法是在悬停时显示不可忽略的隐形叠加。

演示：http://jsfiddle.net/FNVmh/1/

使用CSS禁用onclick ::可能吗？

10 个答案: