css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。
现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS:pointer-events</title>
<style type="text/css">
.overlay1 {
width:80px;
height:20px;
background:gold;
position:absolute;
top:5px;
left:5px;
opacity:0.5;
}
.overlay2 {
width:80px;
height:20px;
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://mail.sina.com.cn">SinaMail</a>
<br/><br/>
<span onclick="alert(3);">SinaMail</span>
<p>
<input id="chx" type="checkbox">
<label for="chx">开启穿透点击</label>
</p>
</body>
</html>
默认情况下，链接和span元素被绝对定位的两个div都遮住了。分别点击后无反应，即无法触发链接a的默认行为，无法触发span元素的click事件。但开启穿透点击后支持pointer-events的浏览器Firefox/Safari/Chrome中再次点击链接和span则可以触发相应的行为。
css属性pointer-events的更多相关文章
- 浏览器 Pointer Events
前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...
- 第六篇、CSS属性
<!--1.可继承性 visible(可见的):hidden --掩藏,但是结构还保存 cursor(光标样式):pointer(手指)crosshair(十字架) 一般是文字控制属性 内联标签 ...
- css属性之@media
Base Browsers: IE6.0+, Firefox2.0+, Chrome4.0+, Safari6.0+, Opera15.0+ <expression>:指定媒体查询使用的媒 ...
- HTML标签CSS属性默认值汇总
HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...
- css属性分类介绍
css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...
- 【转载】神奇的css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发.现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-ev ...
- 点赞功能实现 $(tag).css('属性', '样式')
1. 创建标签 document.createElement() 2.$(tag).css('属性', 样式) 赋予标签属性样式 3.设置定时器 改变位置 大小 <!DOCTYPE html&g ...
- css属性（常用属性整理）
摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 ...
- HTML CSS 属性大全
CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...
随机推荐
- jsp用jstl标签比较枚举
日向博客最近在优化,有这一样一个小问题,我希望在下面的消息中心页面,未读的消息链接显示蓝色,已读的消息显示红色: 这就需要用jstl做一个判断. 之前的代码是这种形式: 消息中心:<br> ...
- IOS 使用dispatch_once 创建单例
+ (instantClass *)sharedClient { static instantClass *_sharedClient = nil; static dispatch_once_t on ...
- JavaWeb——文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
- App Store不能下载一直等待中的两种解决办法
1,重启手机,之后确认是否得到改善 2,重启不行,更改WiFi的dns为114.114.114.114或者223.5.5.5 或 223.6.6.6,再重启手机 ps:我是第二种方法
- LAMP的安装
一,LAMP的安装流程:mysql.apache.php或者apache.mysql.php.php放到最后的原因是,php在编译安装的时候是依赖于前2者的. 二,Mysql的安装: 1.下载mysq ...
- Jvm垃圾回收堆内存变化过程
当Eden区域满时,触发minor GC,垃圾收集器把Eden区域中的不可达对象标记出来.第一次执行minor GC时Survivor 1与Survivor 2均为空: Eden中的不可达对象占用的内 ...
- ASP.NET Signalr 2.0 实现一个简单的聊天室
学习了一下SignalR 2.0,http://www.asp.net/signalr 文章写的很详细,如果头疼英文,还可以机翻成中文,虽然不是很准确,大概还是容易看明白. 理论要结合实践,自己动手做 ...
- java学习之部分笔记
1.枚举类型 2.String的方法Index的用法.StringBuffer 的用法.Math的用法.Date类 3.用abstract修饰的类就是抽象类.抽象方法不能有主体.抽象类中,可以有抽象方 ...
- Windows下Vundle安装
鼠标手老是发作,没办法.想学习vim尽量减少编码时使用鼠标的频率.安装好gVim开始安装Vundle插件,总结下安装过程和各种遇到的坑: github上VundleVim倒是有说明 Windows S ...
- C++标准程序库读书笔记-第二章新的语言特性
1.基本类型的显式初始化 如果采用不含参数.明确的constructor(构造函数)调用语法,基本型别会被初始化为零: int i1; //undefined value int i2 = int() ...