pointer-events

示例(Examples)

¥Examples

忽略指针事件(Ignoring pointer events)

¥Ignoring pointer events

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

¥Use the pointer-events-none utility to make an element ignore pointer events, like :hover and click events:

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

指针事件仍将在子元素上触发并传递给作为目标的 "beneath" 元素。

¥The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.

恢复指针事件(Restoring pointer events)

¥Restoring pointer events

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

¥Use the pointer-events-auto utility to revert to the default browser behavior for pointer events:

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