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 5625 Clarke and chemistry
Problem Description Clarke is a patient with multiple personality disorder. One day, Clarke turned i ...
- Unity 生命周期
原文翻译: Execution Order of Event Functions 事件函数的执行顺序 Edit ...
- 模块工具类--utils
File: js\utils.js/** * 模块工具类,用来初始化各模块视图.自定绑定事件以及其他辅助功能等 * @class Utils */Utils = (function() { var i ...
- STL 整理（map、set、vector、list、stack、queue、deque、priority_queue)(转)
向量(vector) <vector> 连续存储的元素<vector> Vector<int>c; c.back() 传回最后一个数据,不检查这个数据是否存在 ...
- 具体解释EBS接口开发之物料导入API
create_item inv_item_grp.create_item(p_commit => fnd_api.g_true, -- p_item_rec => l_item_rec, ...
- UGUI实现的虚拟摇杆，可改变摇杆位置
实现方式主要参考这篇文章:http://www.cnblogs.com/plateFace/p/4687896.html. 主要代码如下: using UnityEngine; using Syste ...
- WinForm RDLC SubReport Step by step
最近在做的一个PO管理系统,因为要用到订单打印,没有用水晶报表,直接使用VS2010的Reporting.参考了网上的一些文章,但因为找到的数据是用于WebForm的,适配到WinForm有点区别,竟 ...
- Oracle官方版Entity Framework
千呼萬喚始出來! Oracle官方版Entity Framework問市,邁入開發新時代 自從我得了一種"不用LINQ就不會寫資料庫程式"的病,為了滿足工作上要搭配Oracle(雖 ...
- EF 事务处理 (InnoDB Engine的MySQL表也可以)
备忘 1. 亲测(可以嵌套使用) using (TransactionScope scope = new TransactionScope()) { //操作1 XXEntities.Current. ...
- JQ选择器
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...