pointer-events

pointer-events

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

类名样式

类名	样式
`pointer-events-auto`	`pointer-events: auto;`
`pointer-events-none`	`pointer-events: none;`

pointer-events-auto

pointer-events: auto;

pointer-events-none

pointer-events: none;

示例

忽略指针事件

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

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

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>

示例

忽略指针事件

恢复指针事件

本页内容