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

Question

我想onclick用CSS 禁用事件.可能？

让我说我有

<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;

更多在这里

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;
}