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

除了目前ie和ff的兼容性问题,还是很好用的
事件穿透父层 直达子层 pointer-events:none的更多相关文章
- js 冒泡事件阻止 父层事件影响子层
当父层 与子层 有相同的事件时,但子层跟父层执行的内容却不一样时 为了 防止 父层事件对子层造成影响我们可以在子层的方法里做如下操作 function A (event){ event.stopPro ...
- css 父层 透明 子层不透明Alpha
html代码 <div class="user2-register-bg"> <div class="user2-register-con"& ...
- layer子层给父层页面元素赋值,以达到向父层页面传值的效果
父层: jsp中: //页面上添加一个隐藏的输入框待用于被子层设置value,从而将子层的数据传递到此页面 <input type="hidden" id="get ...
- 浏览器 Pointer Events
前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...
- 移动端touchstart事件穿透问题,解决方案
[来源]:在开发移动端网站时,会经常徘徊在click和touchstart之间:因为touchstart虽然好用和快速响应:但是其缺点也是显而易见的,当我们大面积的使用touchstart的时候就会遇 ...
- [原创]实现多层DIV叠加的js事件穿透
Flash里面有个很好的特性是,一个容器里,不存在实际对象的部分,不会阻拦鼠标事件穿透到下一层. 前端就不一样了,两个div层叠以后,上层div会接收到所有事件(即使这个div里面内容是空的,没有任何 ...
- CSS002. 字体穿透蒙层(用img设置字体的color)
之前在逛Apple Store时看到了下面的UI: 交互图标非常圆滑上手也很舒服,虽然背景底色本就是白底,但是只依赖css能不能使 "+" 穿透背景看到底色 ? 大致思路如下: ...
- 支持事件穿透?使用pointer-events样式
使用绝对定位元素,让元素A完全盖住元素B时,如何通过元素A来响应元素B的事件呢? 上图可以用下面的SVG代码来实现: <svg width="200" height=&quo ...
- 手机端 zepto tap事件穿透
什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...
随机推荐
- 在python中如何使用多进制数字
我们在python中,除十进制外还可以使用二进制.八进制和十六进制 1.二进制数字由0和1组成,我们使用0b或0B前缀表示二进制数 2.使用bin()函数将一个数字转换为它的二进制形式 print(b ...
- URAL 2081 Faulty dial
题目: Faulty dial Pavel has not played ACM for ages, nor does he train teams, nor prepare problems. Th ...
- jmeter 分布式集群
Jmeter压测过程中,由于测试机配置有限,CPU.内存都可能是存在瓶颈.如果使用很大的并发进行测试时,就可能会感到程序比较卡,这时候就无法继续增加压力了. 解决方法: 搭建Jmeter分布式集群,远 ...
- Java经纬读坐标的距离计算
问题引出: 今天遇到经纬度坐标转换距离的工作,根据网站登录者的IP确定登录者目前的位置信息,将其经纬度信息与所有的营业厅的经纬度进行对比,网页上显示出距离登录者最近的营业厅地址,本打算就做一个二维坐标 ...
- vue切换路由模式{hash/history}
vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({ // 路由模式:hash(默认),hist ...
- 当root用户无密码,非超级权限用户时提示mysqladmin: Can't turn off logging; error: 'Access denied; you need the SUPER privilege for this op解决方案
问题: 在centOS上安装了mysql后,卸载了又重新安装,使用mysqladmin -u root password 'new password' 更改密码,提示: mysqladmin: Can ...
- Oracle数据库使用总结
--1.使用月份作为条件筛选(to_char函数与extract函数使用) select * from test_date where to_char(dqsj,'mm') like '%07%'; ...
- HDU 1238 Substing
思路: 1.找出n个字符串中最短的字符串Str[N] 2.从长到短找Str[N]的子子串 subStr[N],以及subStr[N]的反转字符串strrev(subStr[N]):(从长到短是做剪枝处 ...
- 织梦dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法
dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是:二级域名+图片地址,这是相对路径.但是你的图片是默认上传在uploads里面的.应该使用绝对路径.这 ...
- MongoError: server instance in invalid state undefined 解决办法
MongoDB关键点集锦(更新中...) 2017-01-20 09:33:48[其它数据库]点击数:15作者:Real_Bird的博客来源: 网络 随机为您推荐的文章:MongDB索引的介绍及使用 ...