之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom的事件操作,点击之类的就失灵了。之前我的做法要么就是在canvas上加入点击事件,穿透到下层,或者把下层的div通过z-index属性放在canvas的上层。这种办法都显得死板或者展现效果很差。
看了下面这段代码,发现了css3的解决办法:
.snow-canvas { display: block; width: 100%; height: 100%; top: 0; left: 0; position: fixed; pointer-events: none; }
就是通过pointer-events设置为none,可以让事件自动到下层去,不过坏处也有,就是通过F12开发者工具不容易找到canvas这个元素。
看看官方文档的解释:
除了目前ie和ff的兼容性问题,还是很好用的