CSS 阻击点击事件：让禁用的样式与逻辑和谐统一**

前端

2023-10-22 17:02:21

前言

在交互式 Web 应用程序中，禁用元素对于提供视觉提示和防止用户执行不可用的操作至关重要。通过禁用元素，我们可以传达出元素当前处于非活动状态，避免用户产生误解或 frustration。

CSS 的 "disabled" 类

CSS 中的 "disabled" 类专门用于禁用表单元素，如按钮、输入框和下拉列表。当应用到元素时，它会在元素上应用一组默认样式，包括：

光标样式更改为 "not-allowed"
文本颜色变灰
背景色通常变为浅灰色

这些样式向用户清楚地表明元素已禁用，并且无法与之交互。

JavaScript 事件处理

虽然 CSS 的 "disabled" 类提供了视觉提示，但它本身并不能阻止点击事件。为了实现真正的禁用行为，我们需要使用 JavaScript 来处理事件。我们可以使用以下代码片段：

document.querySelectorAll("button").forEach((button) => {
  button.disabled = true;
  button.addEventListener("click", (event) => {
    event.preventDefault();
  });
});

这段代码首先禁用所有按钮，然后为每个按钮添加一个点击事件监听器。当用户点击禁用的按钮时，事件监听器将阻止默认操作，从而防止按钮执行任何动作。

融合 CSS 和 JavaScript

为了实现禁用的样式与逻辑的完美统一，我们需要将 CSS 的 "disabled" 类与 JavaScript 的事件处理结合起来。我们可以通过以下方式实现：

.disabled {
  cursor: not-allowed;
  color: #ccc;
  background-color: #f5f5f5;
}

.disabled button {
  pointer-events: none;
}

document.querySelectorAll("button").forEach((button) => {
  button.classList.add("disabled");
  button.addEventListener("click", (event) => {
    event.preventDefault();
  });
});

这段代码将 "disabled" 类的样式应用到按钮上，同时使用 JavaScript 禁用按钮的点击事件。这样，按钮将具有禁用样式，并且在点击时不会执行任何操作。

特殊情况处理

在某些情况下，我们需要对列表项的第一项和最后一项进行特殊处理。例如，如果列表是可排序的，则我们可能希望禁用第一项的上移图标和最后一项的下移图标。我们可以通过以下方式实现：

.list-item:first-child .up-icon {
  pointer-events: none;
  opacity: 0.5;
}

.list-item:last-child .down-icon {
  pointer-events: none;
  opacity: 0.5;
}

const firstItem = document.querySelector(".list-item:first-child");
const lastItem = document.querySelector(".list-item:last-child");

firstItem.querySelector(".up-icon").addEventListener("click", (event) => {
  event.preventDefault();
});

lastItem.querySelector(".down-icon").addEventListener("click", (event) => {
  event.preventDefault();
});