使用 pointer-events: none 可使元素不可点击，该属性禁用鼠标和触摸事件并允许事件穿透至下层元素；需配合 cursor: not-allowed、opacity 或 filter 视觉提示，以及 tabindex="-1" 和 aria-disabled="true" 确保可访问性，避免仅依赖 display 或 visibility 等伪禁用方式。
让元素不可点击，核心是阻止用户交互行为，CSS 提供了简单直接的方案：使用 pointer-events: none。
pointer-events: none 是最常用且有效的方法
这个属性会完全禁用元素上的鼠标事件（如 click、hover、drag）和触摸事件，同时它还会“穿透”该元素——事件会触发其下方的元素（如果有的话）。
- 适用于任何 HTML 元素（按钮、链接、div、图片等）
- 写法简洁：
element { pointer-events: none; } - 注意：它不影响键盘焦点（如 Tab 导航），若还需禁用键盘操作，需配合
tabindex="-1"和aria-disabled="true"
配合其他属性增强“不可点击”语义
仅靠 CSS 无法改变元素的功能逻辑，视觉和可访问性需同步处理：
- 加
cursor: not-allowed;让鼠标悬停时显示禁止符号，提升直观性 - 降低透明度或改灰阶色（如
opacity: 0.5;或filter: grayscale(100%);）暗示禁用状态 - 对按钮或链接，建议同时设置
disabled属性（）或aria-disabled="true"，确保屏幕阅读器识别
不推荐的“伪禁用”方式
以下方法看似让元素点不动，但存在明显问题：
jQuery+echarts上传图片生成文字标签云代码
下载
一款很稀有的jQuery+echarts上传图片生成文字标签云代码，基于echarts图表插件和jQuery实现根据图片样式生成彩色文字标签云特效，点击标签关键词还可以放大。
立即学习“前端免费学习笔记（深入）”；
-
display: none;—— 元素彻底消失，不是“不可点击”，而是不存在 -
visibility: hidden;—— 元素不可见但仍占位，也无法响应事件，但不具穿透性，且影响可访问性 - 只改颜色/透明度而不设
pointer-events—— 视觉像禁用，实际仍可点击
基本上就这些。pointer-events: none 是实现 CSS 层面“不可点击”的标准解法，简单、可靠、兼容性好（IE11+ 支持）。关键是要结合语义属性和视觉反馈，做到体验一致。
