<!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. 【python】【开源】使用Tkinter和matplotlib实时显示图像，打造属于自己的性能测试小工具

    在腾讯的perfdog工具还未公开时,当时需要查看内存使用情况等信息,就用python写了个小工具 为了提升开发效率,就直接借用了雷子开源的性能测试工具的布局,自己美化了一下,然后加入了实时显示数据的 ...

  2. http1.0 、http1.1和http2.0的区别

    一.HTTP1.0 HTTP 1.1主要区别       1.1 长链接             HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而HTTP1.1默认支 ...

  3. mysql导入超大sql文件

    mysql导入超大sql文件 在网上找了个2017年行政区划的sql文件,需要导入到本地mysql库中,同事使用navicat导入的时候直接卡死了,该SQL文件差不多112MB大小.通过百度.goog ...

  4. 【优雅写代码系统】springboot+mybatis+pagehelper+mybatisplus+druid教你如何优雅写代码

    目录 spring基本搭建 整合mybatis pom配置 mybatis配置 设置数据源 设置sqlsessionfactory 设置扫描 设置开启事务 资源放行 测试 结果 思考&& ...

  5. @codechef - JADUGAR2@ Chef and Same Old Recurrence 2

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 定义 dp 序列: \[dp(1) = K\\ dp(n) = ...

  6. Mac搭建Fluter应用环境

    1.创建一个路径.例如我创建是: /Users/chenghui/ 然后创建一个文件夹: development 把下载好的Fluter 解压到当前目录下: development /Users/ch ...

  7. Tensorflow报错：OMP: Error #15: Initializing libiomp5.dylib, but found libiomp5.dylib already initialized.

    参考: https://github.com/dmlc/xgboost/issues/1715 解决方法: I solved it with 'conda install nomkl'.

  8. node实现文件属性批量修改(时间属性)

    前言 在默认情况下,一个文件的创建时间和修改时间是系统自己设定的,我们不能修改该的.但我们有时为了某种特殊需要,为了不让别人一眼看出文件已经给修改了,我们又需要修改文件的创建时间和修改时间.那么如何修 ...

  9. 红米手机 android4.4.4 root之路

    第一步: 进入360root官网下载apk安装包: http://root.360.cn/index.html 说明:不是所有的机型都能root,  一般android5.0 以下的系统root的成功 ...

  10. WeChair——团队展示

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队作业第一次 这个作业的目标 团队合作,项目开发 作业正文 如下 其他参考文献 ...