pointer-events

用于控制元素是否响应指针事件的工具类。

快速参考

类	属性
pointer-events-auto	pointer-events: auto;
pointer-events-none	pointer-events: none;

示例

忽略指针事件

使用 pointer-events-none 工具类，让元素忽略 :hover 和 click 等指针事件：

pointer-events-auto

pointer-events-none

<!-- [!code classes:pointer-events-none,pointer-events-auto] -->
<div class="relative ...">
  <div class="pointer-events-auto absolute ...">
    <svg class="absolute h-5 w-5 text-gray-400">
      <!-- ... -->
    </svg>
  </div>
  <input type="text" placeholder="Search" class="..." />
</div>

<div class="relative ...">
  <div class="pointer-events-none absolute ...">
    <svg class="absolute h-5 w-5 text-gray-400">
      <!-- ... -->
    </svg>
  </div>
  <input type="text" placeholder="Search" class="..." />
</div>

指针事件仍会在子元素上触发，并穿透到目标「下方」的元素。

恢复指针事件

使用 pointer-events-auto 工具类，将指针事件恢复为浏览器默认行为：

<div class="pointer-events-none md:pointer-events-auto ...">
  <!-- ... -->
</div>