指针事件

​基础用法

​控制指针事件行为

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

使用 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 来仅 在 focus应用 pointer-events-auto.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:pointer-events-auto 来应用 pointer-events-auto 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.