怎样用纯CSS实现禁止鼠标点击事件？

在纯 CSS 中，您可以使用 pointer-events: none; 来禁止鼠标点击事件。这个属性会禁用元素上的所有鼠标事件，包括点击、悬停和其他鼠标交互。

.disabled-element {
  pointer-events: none;
}

将这个类添加到您想要禁用点击事件的 HTML 元素上即可。

一些需要注意的点：

子元素继承： 如果父元素设置了 pointer-events: none;，那么它的所有子元素也将继承这个属性，并变得无法点击。如果您希望子元素仍然可以点击，需要在子元素上明确地设置 pointer-events: auto; 来恢复鼠标事件。
JavaScript 交互： pointer-events: none; 只禁用鼠标事件。 JavaScript 事件监听器（例如 addEventListener('click', ...)）仍然可以被触发。如果您需要完全禁用元素的交互，包括 JavaScript 事件，您需要在 JavaScript 代码中进行处理，例如移除事件监听器或阻止事件传播。
键盘导航： pointer-events: none; 不会禁用键盘导航。如果您需要禁用键盘导航，可以使用 tabindex="-1" 属性。
a 标签: 对于 <a> 标签，即使设置了 pointer-events: none;，默认情况下仍然可以通过键盘的 Tab 键选中并回车访问链接。为了完全禁用 <a> 标签，除了 pointer-events: none; 外，还需要设置 disabled 属性或使用 JavaScript 阻止默认行为。

示例：

<div class="disabled-element">
  This div cannot be clicked.
  <button>This button also cannot be clicked.</button>
  <div class="enabled-element">
    But this div can be clicked.
  </div>
</div>

<style>
.disabled-element {
  pointer-events: none;
}

.enabled-element {
  pointer-events: auto;
}
</style>

在这个例子中，外部的 div 和它包含的 button 都无法被点击，但是内部的带有 enabled-element 类的 div 仍然可以点击。

更全面的禁用方案 (JavaScript 辅助):

如果需要更全面的禁用，建议结合 CSS 和 JavaScript：

const element = document.querySelector('.disabled-element');

element.style.pointerEvents = 'none'; // 禁用鼠标事件
element.setAttribute('tabindex', '-1'); // 禁用键盘焦点
element.addEventListener('click', (event) => {
  event.preventDefault(); // 阻止任何点击事件
});