仅使用类禁用 div 的单击处理程序

Question

我不是一个HTML向导，但我确实想在HTML中创建一个可以启用和禁用的简单引导按钮。我的问题是，假设这是一个引导按钮：

<div class="button" onClick=doSomething >My Button</div>

这是防止同一个按钮被点击的正确方法吗？

<div class="button disabled" onClick=doSomething >My Button</div>

感谢

Answer 1

<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

只需切换类别btn-primary/btn-secondary和禁用状态。

请参阅文档：按钮-引导

Answer 2

这里有一个相当奇怪的请求。我不知道你为什么不使用Bootstrap类、按钮元素和禁用属性：

function go() {
console.log('went');
}

body {
padding: 30px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<button type="button" class="btn btn-primary" onclick="go()">Button</button>
<button type="button" class="btn btn-primary" onclick="go()" disabled>Button</button>

也就是说，您可以使用CSS:关闭任何元素的指针事件

function doSomething() {
console.log('clicking happened');
}

.disabled {
pointer-events: none; /* <-- here's your huckleberry */
opacity: 0.65;
}
.button {
display: inline-block;
background: #ddd;
padding: 4px;
margin: 2px;
border: 1px solid #ccc;
cursor: pointer;
}

<div class="button" onClick="doSomething()">"Button"</div>
<div class="button disabled" onClick="doSomething()">Disabled "Button"</div>