<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS:pointer-events</title>

<style type="text/css">

.overlay1 {

width:200px;

height:30px;

background:green;

position:absolute;

top:5px;

left:5px;

opacity:0.5;

}

.overlay2 {

width:200px;

height:30px;

background:gold;

position:absolute;

top:40px;

left:5px;

opacity:0.5;

}

.pointer{pointer-events:none;}

</style>

<script type="text/javascript">

window.onload = function(){

document.getElementById('chx').onclick = function(){

document.getElementById('a').className

= "overlay1 " + ((this.checked)? "pointer" : "");

document.getElementById('b').className

= "overlay2 " + ((this.checked)? "pointer" : "");

}

}

</script>

</head>

<body>

<div id="a" class="overlay1"></div>

<div id="b" class="overlay2"></div>

<a href="http://www.baidu.com">baidu</a>

<br/><br/>

<span onclick="alert(3);">span under the div</span>

<p>

<input id="chx" type="checkbox">

<label for="chx">开启穿透点击</label>

</p>

</body>

</html>

　　

css3-pointer-events的更多相关文章

  1. 浏览器 Pointer Events

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

  2. javascript code snippet -- Forwarding Mouse Events Through Layers

    Anyone who has worked with web apps has likely created a masking element at some point, and the grea ...

  3. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  4. touch pointer

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  5. 浏览器的统一指针事件：Pointer Event

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  6. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  7. mst总结

     1.jsonp跨域 Jsop的原理:利用script不存在跨域的问题,动态创建script标签,把需要请求的数据源地址赋值给其src属性,并且指定一个回调函数,从而接受到我们想要的数据 后台设置下 ...

  8. javascript 手势缩放 旋转 拖动支持：hammer.js

    原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 ...

  9. Xenko基础API笔记3- Pointers指针设备屏幕上点对应的手指触摸。

    样本这里是一个简单的示例程序,跟踪目前在屏幕上的指针和打印他们的位置.访问输入字段,类继承自@ SiliconStudio.Xenko.脚本的类. public override async Task ...

  10. 【转】谈谈Google Polymer以及Web UI框架的未来

    原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer 摘要:开发者Axel Rauschmayer在自己的博客上详解了G ...

随机推荐

  1. java实现第七届蓝桥杯煤球数量

    煤球数量 煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第四层10个(排列成三角形), - 如果一共有100层,共有多少个煤 ...

  2. 关于nginx的源码安装方式

    Nginx(engine x)是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器, 也是一个 IMAP/POP3/SMTP 代理服务器.在高连接并发的情况下, ...

  3. Python--字典（三级菜单）

    # -*- coding:utf-8 -*- data = { "腾讯":{ "LOL":{ "上单":["诺手",&q ...

  4. ubuntu12.04 qtcreate支持中文输入

    1.sudo apt-get install ibus-qt4 2.重启电脑 reboot

  5. PHP 直接插入排序

    php数组下标从0开始,所以第一步就是数组长度加1,数组元素全部后移一位,把下标0对应值设置为哨兵.结果顺序排序完成后,删除哨兵. function insert_sort($arr) { //这里可 ...

  6. Calculating a “Row X of Y”

    显示 “Row X of Y,” ,X是当前行,Y是总行数,  那就是 ROW_NUMBER(ORDER BY stor_id) of Count(*) OVER()此处还是以样例数据库 pub 为例 ...

  7. （九）maven-surefire-plugin常用配置

    原文链接:https://www.cnblogs.com/pixy/p/4718176.html 对maven-surefire-plugin有想了解的,看这篇:https://www.cnblogs ...

  8. logback.xml 不能被加载，logback不能被执行，logback.xml 无法生效，slf4j日志样式输出失败

    1. 原因 logback.xml 无法被加载, 尝试了好久还是失败,哎,最后新建工程竟然可以,所以说还是项目的问题: 原来项目依赖了两个slf4j.jar,是版本冲突了: 2. 查找原因 idea ...

  9. drf之序列化组件(一)：Serializer

    序列化组件:Serializer.ModelSerializer.ListModelSerializer Serializer  偏底层  ModelSerializer       重点  List ...

  10. maven中pom.xml中配置整理： groupId、artifactId、parent、dependency、dependencyManagement区别

    <groupId>com.mycompany.commonmaven</groupId> <artifactId>commonmaven</artifactI ...