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

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

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

pointer-events: initial;
登录后复制

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

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


  
    开始
  
登录后复制

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

以上就是如何在父元素 `pointer-events: none` 时让子元素点击事件生效?的详细内容,更多请关注慧达安全导航其它相关文章!

点赞(0)

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部