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

【问题标题】：Disabling a div's click handler with just classes仅使用类禁用 div 的单击处理程序
【发布时间】：2021-09-13 00:24:50
【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

正如我所提到的，您应该使用按钮元素。如果出于某种原因无法访问，请改用ARIA roles 以实现可访问性。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

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

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

查看文档：Buttons - Bootstrap

【讨论】：

【解决方案2】：

你有一个很奇怪的要求。我不确定您为什么不使用 Bootstrap 类、按钮元素和 disabled 属性：

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>

【讨论】：

谢谢。 btn-primary 和 btn-secondary 做了我需要的（是的，按钮有点奇怪，我只是有点迷路但现在很好）