网页添加confetti下落动画后遮挡下层按钮无法点击该如何解决

解决方案 #

只需要给你的canvas元素CSS新增pointer-events: none属性即可，修改后的样式代码如下：

#my-canvas
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    /* 新增这一行即可实现点击穿透 */
    pointer-events: none;
}

属性说明 #

• pointer-events: none的作用是让当前元素完全不响应任何鼠标、触摸类的交互事件，所有点击、悬浮、拖拽等操作都会直接穿透该元素，作用到下层的元素上
• 该属性不会对元素的可见性、渲染效果产生任何影响，你的confetti下落动画会完全正常显示，所有主流浏览器均支持该属性

内容的提问来源于stack exchange，提问作者ToseSenpai