<!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. Linux网络命令详解

    命令write,功能是给指定用户发信息(接收信息的用户要处于登录状态,相当于QQ的私聊),例如:用户xbb给用户liuyifei发消息:I want to eat together!(发送消息以CRT ...

  2. 信道估计（channel estimation）图解——从SISO到MIMO原理介绍

    1. 引言 在所有通信中,信号都会通过一个介质(称为信道),并且信号会失真,或者在信号通过信道时会向信号中添加各种噪声.正确解码接收到的信号而没有太多错误的方法是从接收到的信号中消除信道施加的失真和噪 ...

  3. 调优 | Apache Hudi应用调优指南

    通过Spark作业将数据写入Hudi时,Spark应用的调优技巧也适用于此.如果要提高性能或可靠性,请牢记以下几点. 输入并行性:Hudi对输入进行分区默认并发度为1500,以确保每个Spark分区都 ...

  4. iOS－Reactive Cocoa的常见用法

    今天是周末,临近年底,工作上遇到不可抗力,会有点一些变动!这多少会让人有一点静不下来,但需克制,Reactive Cocoa是今天的主角! 废话不多说,今天聊聊Reactive Cocoa的常见使用! ...

  5. CSS3弹性布局内容对齐（justify-content）属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自动边距被确定后. 它用来在存在剩余空间时如何加以分配 ...

  6. Spring AOP—注解配置方法的使用

    Spring除了支持Schema方式配置AOP,还支持注解方式:使用@AspectJ风格的切面声明. 1 启用对@AspectJ的支持 Spring默认不支持@AspectJ风格的切面声明,为了支持需 ...

  7. （四）POI-设置单元格的对其方式

    原文链接:https://blog.csdn.net/class157/article/details/92817149 package com.java.poi; import org.apache ...

  8. @font-face规则指定字体

    兼容性写法: @font-face { font-family: '字体名'; src: url('字体名.eot'); /* IE9 兼容模式 */ src: url('字体名.eot?#iefix ...

  9. 果然学习好是有道理的，学习Mysql与正则表达式笔记

    正则表达式是用来匹配文本的特殊的字符集合,将一个正则表达式与文本串进行比较,Mysql中用where子句提供支持,正则表达式关键字:regexp1.使用‘|’匹配两个串中的一个 2.使用‘[]’匹配几 ...

  10. ida 动态调试apk

    1,启动 android_x86_server 2 adb forward tcp:23946 tcp:23946 调试应用命令:adb shell am start -D -n com.droidh ...