Lzh on GitHub

pointer-events

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

快速参考

类名样式
pointer-events-autopointer-events: auto;
pointer-events-nonepointer-events: none;

示例

忽略指针事件

使用 pointer-events-none 工具类可以使元素忽略指针事件，例如 :hover 和 click 事件：

点击搜索图标以查看预期行为

pointer-events-auto

pointer-events-none

<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>