之前我也做过一些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(名称空间、函数嵌套、函数对象)

    一.名称空间: 名称空间 定义:存放名字和值的绑定关系       内置名称空间 python自带的名字,如print.int.str 解释器启动就会生效   全局名称空间 文件级别定义的名字,都会放 ...

  2. 利用开源的TaskScheduler组件实现监控和管理windows计划任务

    对于计划任务的执行有很多种解决方案,如利用开源Quartz作业调度框架,在SQL Server的作业等等,同时Windows的任务计划程序功能也很强大,利用此可以很方便的实现很多计划任务,除了人工进行 ...

  3. $python打包工具pyinstaller的用法

    pyinstaller是一个很好用的python打包工具,在Windows环境下可以将python脚本打包成一个exe可执行文件,并且脚本中所依赖的各种第三方库在打包时候都会被统一处理到一起,这样打包 ...

  4. CROS跨域 解决方案 之 tomcat 做过滤处理解决

    摘自:http://www.cnblogs.com/liuwenhao-1/articles/6963540.html 1 .在项目中常常遇到本地访问服务器上的链接数据访问不到,并出现如下问题: 这是 ...

  5. 程序员、架构师、技术总监、CTO

    程序员 程序员,英文名coder/programmer,大家常自嘲叫码农的阶段.这个角色职责是把需求或产品实现为用户可用的软件产品. 此职位为执行级别.另外因为经验较少,一般需要求助别人,或与别人一起 ...

  6. shell检查网络出现异常、僵尸进程、内存过低后,自动重启

    #!/bin/bash while : do neterror=$(/bin/netstat -a | grep -cw "CLOSE_WAIT") echo "get ...

  7. iOS字符串处理

    拼接字符串 NSString* string; NSString* string1, string2; //方法1. string = [NSString initWithFormat:@" ...

  8. Linux系统下配置squid代理服务器的过程详解

    简单记录一下Squid透明代理服务器的配置 环境:VirtualBox + CentOS 6.0 + squid-3.1.4-1.el6.i686 0.检查squid是否默认安装,没有安装的先安装 [ ...

  9. hibernate的多对多配置

    Teacher.java package com.xiaostudy.domain; import java.util.HashSet; import java.util.Set; /** * Tea ...

  10. codeforces781A Andryusha and Colored Balloons

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...