【转载】神奇的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 ...
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
- Mozilla推荐的CSS属性书写顺序及命名规则
传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...
- 第六篇、CSS属性
<!--1.可继承性 visible(可见的):hidden --掩藏,但是结构还保存 cursor(光标样式):pointer(手指)crosshair(十字架) 一般是文字控制属性 内联标签 ...
- css属性之@media
Base Browsers: IE6.0+, Firefox2.0+, Chrome4.0+, Safari6.0+, Opera15.0+ <expression>:指定媒体查询使用的媒 ...
- css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发.现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-ev ...
- HTML标签CSS属性默认值汇总
HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...
- bootstrap学习之利用CSS属性pointer-events禁用表单控件
参考链接: CSS3 pointer-events:none应用举例及扩展 首先pointer-events在除去SVG中的应用只有两个值:AUTO | NONE pointer-events:non ...
- css属性分类介绍
css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...
随机推荐
- codevs 3185 队列练习 1
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 给定一个队列(初始为空),只有两种操作入队和出队,现给出这些操作请输出最 ...
- Codeforces.838D.Airplane Arrangements(思路)
题目链接 \(Description\) 飞机上有n个位置.有m个乘客入座,每个人会从前门(1)或后门(n)先走到其票上写的位置.若该位置没人,则在这坐下:若该位置有人,则按原方向向前走直到找到空座坐 ...
- R基础学习（三）-- 简单练习（shiny+mysql+barplot）
测试环境:win10+RStudio 提前准备: install.packages('shiny') install.packages('RMySQL') 数据表准备: 最终实现的界面效果如下:点击[ ...
- Linux学习笔记02—磁盘分区
下面介绍四种最常见的分区方式: (1) 最简单的分区方案. SWAP分区:即交换分区,建议大小是物理内存的1-2倍. /分区:建议大小在6GB以上. 使用以上的分区方案,所有的数据都在/分区上, ...
- spring-boot 速成(3) actuator
actuator 通过暴露一系列的endpoints可以让开发者快速了解spring boot的各项运行指标,比如:线程数,jvm剩余内存等一系列参数. 启用方法很简单,参考下面: dependenc ...
- Go内置库模块 flag
import "flag" flag包实现了命令行参数的解析.每个参数认为一条记录,根据实际进行定义,到一个set集合.每条都有各自的状态参数. 在使用flag时正常流程: 1. ...
- 爬虫IP被禁的简单解决方法
爬虫以前听上去好厉害好神秘的样子,用好了可以成就像Google.百度这样的索索引擎,用不好可以凭借不恰当的高并发分分钟崩掉一个小型网站.写到这里想到12306每年扛住的并发请求量,觉得好牛逼. 爬虫和 ...
- SRM 449 DIV 1 总结(550p标记下，下次做)
今天的250p搞得有点久了,500p是个类似铺瓷砖的dp题,这样先占个坑,给个poj的这类题列表,下次刷完了回来做! POJ 相关DP列表 http://blog.csdn.net/jayye1994 ...
- delphi dxRibbon中 F10快捷键不好用的原因
最近在项目中使用ribbon ,用F10做快捷键,但是不好用, 不好用的原因是dxBarManager1 中的有个选项UseF10ForMenu, 把这项关闭就可以了
- cocos2dx学习之路
http://blog.csdn.net/qq_30501909/article/details/50720227