Javascript 使用 CSS 禁用 onclick :: 可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11451483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable onclick with CSS :: Possible?
提问by ?mega
I would like to disable onclickevent with CSS. Possible?
我想onclick用 CSS禁用事件。可能的？
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.
我想关闭此元素的 onclick 事件，因此onclick="btnCopy(this);"不会处于活动状态。
And by removing "disabled"class
并通过删除“禁用”类
document.getElementById("btnCopy").className =
document.getElementById("btnCopy").className.replace(/(?:^|\s)disabled(?!\S)/, '');
it would go back to normal, so onclickevent will be active.
它将恢复正常，因此onclick事件将处于活动状态。
采纳答案by Simon Forsberg
Add some Javascript to your btnCopyfunction to check if the parameter-element has the disabledclass or not.
向您的btnCopy函数添加一些 Javascript 以检查参数元素是否具有disabled该类。
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.
使用 CSS 来改变 JavaScript 的行为是不可能的。CSS 用于样式化 HTML 元素，JavaScript 用于处理事件和站点的行为。CSS 和 JavaScript 是两个非常不同的东西。CSS 唯一可能的事情是防止用户点击输入（例如按钮）。使用 CSS 解决方案，您不会禁用 onclick 事件中的代码。您只是禁用用户触发 onclick 事件的能力。
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.
但是，有很多方法可以更改页面上的内容（使用更多的 JavaScript 或为您的浏览器使用一些插件），尽管您的 CSS 伪元素，这可能使单击按钮成为可能。这就是为什么不推荐为此使用 CSS 的原因。
回答by Richard M
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/
在某些浏览器中，您可以设置pointer-events: none，但这会禁用所有鼠标事件，而不仅仅是点击。请参阅：https: //developer.mozilla.org/en/CSS/pointer-events/
回答by Krimo
It's hackish, but I would suggest using pseudo-elements:
这是hackish，但我建议使用伪元素：
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...
但是使用 javascript 更有意义，因为您已经在使用它来添加和删除类...
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;
}
回答by Jon Taylor
If you are using javascript to add and remove class then why not just use it to enable disable the click event?
如果您使用 javascript 添加和删除类，那么为什么不使用它来启用禁用单击事件？
回答by Syed
This is how Bootstrap do it.
这就是 Bootstrap 的做法。
.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;
您可以保留cursor: not-allowed;，如果您不需要重置样式，则删除它们opacity: 0.65; filter: alpha(opacity=65); box-shadow: none;
回答by Jim van der Voort
You can use javascript to disable the buttons onclickevent by adding this line of javascript.
您可以onclick通过添加这行javascript 来使用 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.
最好的选择可能是使用 jQuery 并检查 btnCopy 是否具有“禁用”类。
if(!$('btnCopy').hasClass('disabled')){
//Add code to copy text here
}
Good luck!
祝你好运！
回答by Litek
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.
如果您想添加或删除“禁用”类，您也可以在事件处理程序中检查此类，而不是什么都不做，它的元素已禁用类。
回答by Dpolehonski
<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.
它必须用 Javascript 来完成。一个if(indexOf('disabled') == -1)应该做的伎俩。
回答by techfoobar
One way of doing it purely via CSS is displaying an unclickable-invisible overlay on hover.
一种纯粹通过 CSS 实现的方法是在悬停时显示不可点击不可见的叠加层。
