Interactivity
pointer-events
用于控制元素是否响应指针事件。
| Class | Styles |
|---|---|
pointer-events-auto | pointer-events: auto; |
pointer-events-none | pointer-events: none; |
示例
忽略指针事件
使用 pointer-events-none 工具类来使元素忽略指针事件，比如 :hover 和 click 事件：
Click the search icons to see the expected behavior
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>