之前我也做过一些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的更多相关文章

  1. js 冒泡事件阻止 父层事件影响子层

    当父层 与子层 有相同的事件时,但子层跟父层执行的内容却不一样时 为了 防止 父层事件对子层造成影响我们可以在子层的方法里做如下操作 function A (event){ event.stopPro ...

  2. css 父层 透明 子层不透明Alpha

    html代码 <div class="user2-register-bg"> <div class="user2-register-con"& ...

  3. layer子层给父层页面元素赋值,以达到向父层页面传值的效果

    父层: jsp中: //页面上添加一个隐藏的输入框待用于被子层设置value,从而将子层的数据传递到此页面 <input type="hidden" id="get ...

  4. 浏览器 Pointer Events

    前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...

  5. 移动端touchstart事件穿透问题,解决方案

    [来源]:在开发移动端网站时,会经常徘徊在click和touchstart之间:因为touchstart虽然好用和快速响应:但是其缺点也是显而易见的,当我们大面积的使用touchstart的时候就会遇 ...

  6. [原创]实现多层DIV叠加的js事件穿透

    Flash里面有个很好的特性是,一个容器里,不存在实际对象的部分,不会阻拦鼠标事件穿透到下一层. 前端就不一样了,两个div层叠以后,上层div会接收到所有事件(即使这个div里面内容是空的,没有任何 ...

  7. CSS002. 字体穿透蒙层(用img设置字体的color)

    之前在逛Apple Store时看到了下面的UI: 交互图标非常圆滑上手也很舒服,虽然背景底色本就是白底,但是只依赖css能不能使  "+" 穿透背景看到底色 ? 大致思路如下: ...

  8. 支持事件穿透?使用pointer-events样式

    使用绝对定位元素,让元素A完全盖住元素B时,如何通过元素A来响应元素B的事件呢? 上图可以用下面的SVG代码来实现: <svg width="200" height=&quo ...

  9. 手机端 zepto tap事件穿透

    什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...

随机推荐

  1. python连接mongo

    连接mongodb数据库 用到pymongo模块 应该是这样来使用: , 'goods') 然后连接数据库层这么写 def getSpinfo(item,value,depart,comp): res ...

  2. Python(正则 re模块)

    1. 匹配一个字符 表达式 说明 等价表达式 \d 数字 [0-9] \w 字母.数字.下划线 [a-zA-Z0-9_] . 除换行外任意字符   \s 空格 [\t\n\r\f\v] \D 除数字 ...

  3. python数据可视化、数据挖掘、机器学习、深度学习 常用库、IDE等

    一.可视化方法 条形图 饼图 箱线图(箱型图) 气泡图 直方图 核密度估计(KDE)图 线面图 网络图 散点图 树状图 小提琴图 方形图 三维图 二.交互式工具 Ipython.Ipython not ...

  4. HDU - 4407 Sum (容斥)

    题意:初始序列[1..N](1<=N<=4e5),支持两种操作:1.求区间[x,y]内与p互素的数之和: 2.将x位置的数变为c. 分析:很容易把人骗到线段树的思维中,而实际上操作2单点的 ...

  5. 【笔记】css3实现网页平滑过渡效果...

    参考:http://www.imooc.com/video/7142 未完. <!DOCTYPE html> <html> <head> <meta char ...

  6. Linux防火墙--iptables学习

    iptables是Linux系统提供的一个强大的防火墙工具,可以实现包过滤.包重定向.NAT转换等功能.iptables是免费的,iptables是一个工具,实际的功能是通过netfilter模块来实 ...

  7. Linux中Nginx安装部署

    前言 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sys ...

  8. mongodb 的Cursor 作为 stream 的时候,读出来的数据数字开头的key没法访问(又踩了一个坑)

    mongdb 用Cursor 读取数据的时候,直接用流读出来的数据key是数字开头的话,就是独具不到,用Object.keys() 把所有的key 打印出来的话如下:怎么会是这样的呢? 查看了一下文档 ...

  9. php编写的抽奖程序中奖概率算法

    本文给大家分享的是php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂,有需要的小伙伴参考下吧. 我们先完成后台PHP的流程,PHP的主要工作是负责配置奖项及 ...

  10. java中Hashtable集合的常用方法

    实现Map集合的方法这里就不在讲了 https://www.cnblogs.com/xiaostudy/p/9510763.html public Object clone() 返回Hashtable ...