深入浅出 CSS 属性：pointer-events: none

一、 核心概念

pointer-events: none 是一个功能强大的 CSS 属性。简单来说，它会让元素对鼠标/触摸事件完全免疫。

• 视觉可见，交互虚化：元素依然在页面上渲染，但点击、滚动、悬停（Hover）等事件会直接"穿透"该元素，作用于其下层的元素。

• 类似 disabled 但更广 ：除了 input 标签外，它可以应用于任何 HTML 标签（如 a、div、view 等）。

大家都知道 input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，可以试试 pointer-events: none

举个简单的例子：

<a href="http://sf.gg" style="pointer-events: none">click me</a>

这个链接，你是点不了的，并且 hover 也没有效果。（值得一提的是，仅仅是鼠标事件失效，用 tab 键还是可以选中该链接的，然后 enter 打开，这个时候可以去掉 a 标签的 href 属性，就不能让 tab 键选中了）

pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 "浮云牌酱油"。pointer-events: none 的作用是让元素实体 "虚化"。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

---

二、 场景一：防止子元素干扰父元素事件（你的代码示例）

在开发 UI 组件（如列表项）时，我们经常遇到**"事件冒泡"或"点击冲突"**的问题。

checkbox 被嵌套在了一个具有 @click="toggleSelect(item)" 事件的父级 view 中。

<view class="flex" @click="toggleSelect(item)">
  <checkbox
    :checked="..."
    style="transform: scale(0.8); pointer-events: none"
  />
</view>

1. 统一点击区域 ：如果用户精准点击了 checkbox，默认情况下会触发 checkbox 自身的切换。通过设置 none，checkbox 变成了纯粹的状态展示组件。

2. 避免冲突 ：点击 checkbox 的动作会穿透到父级 view 上，从而触发父级的 toggleSelect 函数。这保证了无论点击卡片的哪个位置，逻辑处理都是统一的，且不会因为 checkbox 的默认行为导致逻辑错乱。

---

三、 场景二：装饰性元素的"穿透"处理

现代网页设计中，常会有浮在文字上方的遮罩层、水印或装饰图片。

• 遮罩层/水印：如果你在页面上覆盖了一个全屏的水印或半透明渐变层，如果不加此属性，用户将无法点击下方的按钮或选择文字。

• 解决方式：

  CSS

  .overlay {
      position: absolute;
      top: 0;
      pointer-events: none; /* 穿透遮罩，点击下方内容 */
  }