Pointer Events 指针事件

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

Class	Properties

基本用法

控制指针事件行为

使用 pointer-events-auto 将指针事件恢复为默认浏览器行为（如 :hover 和 click ）。

使用 pointer-events-none 来使元素忽略指针事件。指针事件仍将在子元素上触发，并传递到位于目标“下方”的元素。

👆 尝试点击搜索图标以查看预期的行为

pointer-events-auto

pointer-events-none

<div class="relative ...">
  <div class="absolute pointer-events-auto ...">
    <svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input type="text" placeholder="Search" class="...">
</div>

<div class="relative ...">
  <div class="absolute pointer-events-none ...">
    <svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input type="text" placeholder="Search" class="...">
</div>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 focus:pointer-events-auto 只在悬停时应用 pointer-events-auto 实用程序。

<div class="caret-blue-500 focus:pointer-events-auto">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对响应式断点、深色模式、偏好减少动作等媒体查询进行定位。例如，使用 md:pointer-events-auto 仅在中等屏幕尺寸及以上应用 pointer-events-auto 实用程序。

<div class="caret-blue-500 md:pointer-events-auto">
  <!-- ... -->
</div>

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。