事件穿透父层 直达子层 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上的,所以会导致 ...
随机推荐
- rsync+sersync多线程实时同步
一.sersync优点 1)使用c++编写,对linux系统文件产生的临时文件和重复文件操作会进行过滤,在结合rsync同步的时候,会减少运行时消耗的本地及网络资源,因此速度更快. 2)相比较inot ...
- IOS UIApplicationMain函数
对于UIKIT_EXTERN int UIApplicationMain(int argc, char *argv[], NSString *principalClassName, NSString ...
- maven Eclipse实战材料整理
最近在看github上面的项目,发现好多的源码都是maven组织的,但又要去使用maven,因此找资料学习,但是效果很不好,直到昨天晚上看了mooc上面的视频,理清了自己的思路,特将资料列表如下: 视 ...
- HTML5侧滑聊天面板
在线演示 本地下载
- 20145219 《Java程序设计》实验三 敏捷开发与XP实践
20145219 <Java程序设计>实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 敏捷开发与XP 1.敏捷开发(Agile Development)是 ...
- C++类初始化列表
转自:https://www.cnblogs.com/BlueTzar/articles/1223169.html 构造函数初始化列表以一个冒号开始,接着是以逗号分隔的数据成员列表,每个数据成员后面跟 ...
- 在阿里云centos7上搭建openvpn(未成功)
1.环境: 运行环境:阿里云 系统:centos 内核版本:-.el7.x86_64 各软件版本: iptables--.el7.x86_64 openvpn--.el7.x86_64 easy-rs ...
- SpringBoot ControllerAdvice
在Spring3.2中新增了@ControllerAdvice注解,可用于定义@ExceptionHandler @ModelAttribute @InitBinder,并应用到所有被@Request ...
- 初涉Rx套餐 之RxBinding(让你的事件流程更清晰)
转载请注明出处:王亟亟的大牛之路 最近下班回家都在WOW,周末就爆肝,感觉人都要GO DIE了,昨天下午看了看RxBinding相关的功能感觉还是蛮强大的,所提供的API也是相当丰富(基本Rx套餐都是 ...
- Oauth2.0认证原理
Oauth2.0 认证协议 Oauth2.0 应用场景: 微信联合登录 授权管理 互联网开放平台互相调用保证安全 微信提供api 给toov5调用 然后就可以获取一些微信的信息 比如微信 ...