1. 交互
  2. pointer-events(指针事件)

交互

pointer-events

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

ClassStyles
pointer-events-auto
pointer-events: auto;
pointer-events-none
pointer-events: none;

示例

忽略指针事件

使用 pointer-events-none 工具类可以让元素忽略指针事件,例如 :hoverclick 事件:

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

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>
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy