如何在父元素 pointer-events: none 下保持子元素点击事件生效？

在使用 uniapp/vue 框架时，遇到这样的问题：给父元素设置 pointer-events: none 后，子元素的点击事件失效了。

要解决这个问题，在需要点击事件的子元素上添加以下 css 样式即可：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

pointer-events: initial;

此样式将覆盖父元素 pointer-events: none 的设置，允许子元素接收点击事件。

举例来说，以下代码中，只有按钮元素能够响应点击事件，而父元素则不会：

<view style="pointer-events: none">
  <view @click="next">
    <view style="pointer-events: initial;">开始</view>
  </view>
</view>

需要注意的是，initial 值会使元素的指针事件行为遵循其父元素的默认设置。因此，如果父元素没有设置 pointer-events 或将其设置为 auto，那么子元素的点击事件仍将生效。