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 ...
随机推荐
- HDU 4614 Vases and Flowers (2013多校第二场线段树)
题意摘自:http://blog.csdn.net/kdqzzxxcc/article/details/9474169 ORZZ 题意:给你N个花瓶,编号是0 到 N - 1 ,初始状态花瓶是空的,每 ...
- PHP 超强过滤函数
PHP 超强过滤函数 你有每次要过滤的时候总是去翻曾经的过滤代码的时候么? 你有搜索过怎样防过滤,防攻击的PHP解决方法么? 你有对全然遵循'过滤输入,避免输出',Web界经典说辞么? 事实上 ...
- VisualStudio.DTE 对象可以通过检索 GetService() 方法
DTE dte = (DTE)GetService(typeof(DTE)); string solutionDir = System.IO.Path.GetDirectoryName(dte.Sol ...
- Android应用自动更新功能的实现！！！
自动更新功能的实现原理,就是我们事先和后台协商好一个接口,我们在应用的主Activity里,去访问这个接口,如果需要更新,后台会返回一些数据(比如,提示语:最新版本的url等).然后我们给出提示框,用 ...
- ExtJs4.0入门错误
当在eclipse中的web工程中增加了extjs4,出现An internal error occurred during: "Building workspace". Java ...
- android中列表的滑动删除仿ios滑动删除
大家是不是觉得ios列表的滑动删除效果很酷炫?不用羡慕android也可以实现相同的效果 并且可以自定义效果,比如左滑删除,置顶,收藏,分享等等 其实就是自定义listview重写listview方法 ...
- 基于vue2.0的一个分页组件
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...
- C语言-运算符与表达式
运算符分类: 算术运算符:+ - * / % 关系运算符:> < = <= >= == != 逻辑运算符:&& || ! ...
- [汇编语言]-第二章DEBUG
Debug查看CPU各种寄存器中得内容,内存的情况和在机器码级跟踪程序的运行. 1- 进入Debug xp 开始-运行 cmd 输入 debug 2- Debug功能 r 查看,改变CPU寄存器的内容 ...
- VS2003转VS2010 fatal error C1189: #error
我自己的mfc的demo要转换编译环境出现以下编译错误: VS2010编译错误:fatal error C1189: #error : This file requires _WIN32_WINNT ...