交互
用于控制元素是否响应指针事件的工具。
¥Basic usage
¥Controlling pointer event behavior
使用 pointer-events-auto
恢复指针事件的默认浏览器行为(如 :hover
和 click
)。
¥Use pointer-events-auto
to revert to the default browser behavior for pointer events (like :hover
and click
).
使用 pointer-events-none
使元素忽略指针事件。指针事件仍将在子元素上触发并传递给作为目标的 “beneath” 元素。
¥Use pointer-events-none
to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are “beneath” the target.
尝试单击搜索图标以查看预期的行为
pointer-events-auto
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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use focus:pointer-events-auto
to only apply the pointer-events-auto
utility on focus.
<div class="pointer-events-none focus:pointer-events-auto">
<!-- ... -->
</div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:pointer-events-auto
to apply the pointer-events-auto
utility at only medium screen sizes and above.
<div class="pointer-events-none md:pointer-events-auto">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.