pointer-events

[981377660LMT]

pointer-events是CSS的一个属性，用来设置元素如何响应鼠标、触摸或其他指针设备的事件。

它的常见值有：

• auto：元素正常响应鼠标事件。
• none：元素不响应鼠标事件，鼠标事件会穿透该元素传递给下面的元素。

例如，如果你希望一个元素不响应鼠标点击事件，可以这样设置：

.element {
  pointer-events: none;
}

这样设置后，鼠标点击这个元素，点击事件会穿透该元素，传递给下面的元素。

[981377660LMT]

在React中，如果你希望Popover组件不阻断下面的点击事件，你可以使用CSS的pointer-events属性。将Popover的pointer-events设置为none，这样Popover就不会接收鼠标事件，事件会传递到下面的元素。但是这样做Popover内部的元素也无法接收到鼠标事件，如果需要内部元素接收事件，可以将内部元素的pointer-events设置为auto。

.popover {
  pointer-events: none;
}

.popover .content {
  pointer-events: auto;
}

注意，这种方法只能阻止鼠标事件，对于键盘事件等无效。