30

我想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事件将处于活动状态。

4

10 回答 10

43

你可以这样做。

pointer-events: none;
cursor: default;

更多在这里

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

于 2015-10-20T14:16:24.883 回答
29

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

于 2012-07-12T12:39:50.773 回答
12

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

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

但是，有很多方法可以更改页面上的内容（使用更多的 JavaScript 或为您的浏览器添加一些插件），尽管您使用了 CSS 伪元素，但仍然可以点击按钮。这就是为什么不推荐使用 CSS 的原因。

于 2012-07-12T12:11:06.170 回答
6

这很 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;
}
于 2012-07-12T12:10:44.383 回答
3

这就是 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;

于 2016-05-09T05:32:39.413 回答
2

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

于 2012-07-12T12:09:14.800 回答
0

如果您想添加或删除“禁用”类，您不妨在事件处理程序中检查该类，而不是什么都不做，它的元素已禁用类。

于 2012-07-12T12:13:26.827 回答
0

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

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

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

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

祝你好运！

于 2012-07-12T13:18:59.293 回答
-2 
<div id="btnCopy" class="button" 
    onClick="if(this.className.indexOf('disabled') == -1){btnCopy(this);}">
    <img src="copy.png">
</div>

它必须用Javascript来完成。一个if(indexOf('disabled') == -1)应该做的伎俩。

于 2012-07-12T12:18:40.367 回答
-3

纯粹通过 CSS 实现的一种方法是在悬停时显示不可点击的不可见叠加层。

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

于 2012-07-12T12:28:55.293 回答