如何在父元素 `pointer-events: none` 时让子元素点击事件生效？

你在学习文章相关的知识吗？本文《如何在父元素 `pointer-events: none` 时让子元素点击事件生效？》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

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

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

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

pointer-events: initial;

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

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

<view   style="max-width:100%">
  <view @click="next">
    <view style="pointer-events: initial;">开始</view>
  </view>
</view>

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

好了，本文到此结束，带大家了解了《如何在父元素 `pointer-events: none` 时让子元素点击事件生效？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！