之前我也做过一些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中的闭包是什么

    当一个嵌套函数在其外部区域引用了一个值时,该嵌套函数就是一个闭包,其意义就是会记录这个值 def A(x): def B(): print(x) return B A(7)() #7

  2. 07 Spring框架 依赖注入(四)基于注解的依赖注入

    前面几节我们都在使用xml进行依赖的注入,但是在实际的开发中我们往往偏爱于使用注解进行依赖注入,因为这样更符合我们人的思维,并且更加快捷,本节就来讲述Spring基于注解的依赖注入: 信息注入注解 @ ...

  3. 官方微信接口(全接口) - 微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI

    微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中.微信支付.微信红包.微信卡券.微信小店. 微信开发探讨群 330393916 <?php /**  * Description o ...

  4. 抗DDOS攻击

    2016年10月的某天,“半个美国互联网”都瘫痪了,就是因为遭受了DDoS攻击——Twitter.GitHub.Spotify.Airbnb.Etsy等大量站点都因此受到影响.DNS服务提供商Dyn公 ...

  5. 20145217《网络对抗》 MSF基础应用

    20145217<网络对抗> MSF基础应用 MSF基础应用 1.实践任务 任务一:ms08_067渗透攻击 任务二:IE浏览器渗透攻击--MS12063安全漏洞 任务三:adobe渗透攻 ...

  6. win10安装z3求解器

    因为课程要求,我不得不接触求解器,之前有在ubuntu上装过一个叫stp的求解器,没怎么用: 今天在我的电脑(win10)上上装了一款更方便的求解器---z3,下面先详细介绍一下怎么安装和配置: 1. ...

  7. SpringBoot2.0之整合ElasticSearch

    就类比数据库到时候去实现 服务器端配置 集群名字  与yml名字一致 pom: <project xmlns="http://maven.apache.org/POM/4.0.0&qu ...

  8. DevExpress打印通用代码

    DevExpress打印相关代码 using System;using System.Windows.Forms;using DevExpress.XtraPrinting;using System. ...

  9. 画龙点睛 之RabbitMQ 初来乍到

    消息队列解决了什么问题 1. 异步处理 2. 应用解耦 3. 流量削峰 4. 日志处理...... 安装RabbitMQ (这里的安装我只仅仅说一下linux 的安装 如果想安装windows 版 可 ...

  10. SSH免密登录配置

    SSH免密登录配置 本地生成密钥文件: $ ssh-keygen 输出: Generating public/private rsa key pair. Enter file in which to ...