互动性
pointer-events
用于控制元素是否响应指针事件的工具。
| 类 | 样式 |
|---|---|
pointer-events-auto | pointer-events: auto; |
pointer-events-none | pointer-events: none; |
示例(Examples)
忽略指针事件(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:
点击搜索图标以查看预期的行为
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>指针事件仍然会在子元素上触发，并穿透到目标“下方”的元素。
🌐 The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.
恢复指针事件(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>