<!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实现第五届蓝桥杯出栈次序

    出栈次序 X星球特别讲究秩序,所有道路都是单行线.一个甲壳虫车队,共16辆车,按照编号先后发车,夹在其它车流中,缓缓前行. 路边有个死胡同,只能容一辆车通过,是临时的检查站,如图[p1.png]所示. ...

  2. Charles（青花瓷/花瓶）的基本使用

    前言 Charles 其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的.其次该软件是用 Java 写的,能够在 Windows,Mac,Linux 上使用. ...

  3. Python抽象类以及元类

    抽象基类: 继承的约束与协议 __doc__ = """ 抽象基类: 继承的约束与协议 # 抽象基类 --- 有点java的味道,也有点golang的味道,继承,协议,接 ...

  4. Centos 7 k8s Deployment新副本控制器

    一.概念 Kubernetes提供了一种更加简单的更新RC和Pod的机制,叫做Deployment.通过在Deployment中描述你所期望的集群状态,Deployment Controller会将在 ...

  5. RabbitMQ系列之【启动过程中遇到问题及解决方案】

    1.如果显示找不到主机,请在hosts文件中添加: vi /etc/hosts 127.0.0.1 localhost 2.从3.3.1版本开始,RabbitMQ默认不允许远程ip登录,即只能使用lo ...

  6. [转] VMware中的Ubuntu无法通过桥接方式上网

    遇到的问题:主机可以上网(使用了代理),VMware设置为桥接方式连网.在主机中可以ping通虚拟机,在虚拟机中也可以ping通主机,可是在虚拟机中始终连接不了因特网. 感谢刘洋同学的博文,“在桥接模 ...

  7. 我深爱的Java，对不起，我出轨了！！！呸！渣男！

    我对Java情有独钟 大学三年来,我主学的编程语言一直是Java,为了学好它,我付出了很多心血.现在回想,确实是Java改变了我,造就了我. 因为Java,我自愿在学校组织学弟学妹,给他们讲解Java ...

  8. [计网笔记] 传输层---TCP 传输层思维导图

    传输层思维导图 TCP笔记 为什么是三次握手和四次挥手 https://blog.csdn.net/baixiaoshi/article/details/67712853 [问题1]为什么连接的时候是 ...

  9. RFID-RC522 模块的读写操作【Arduino】

    接线 Arduino Uno <-> RFID-RC52210 <-> SDA13 <-> SCK11 <-> MOSI12 <-> MIS ...

  10. 【大厂面试08期】谈一谈你对HashMap的理解？

    摘要 HashMap的原理也是大厂面试中经常会涉及的问题,同时也是工作中常用到的Java容器,本文主要通过对以下问题进行分析讲解,来帮助大家理解HashMap的原理. 1.HashMap添加一个键值对 ...