pointer-events属性
pointer-events的风格更像JavaScript，它能够：
1.阻止用户的点击动作产生任何效果
.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件
一些需要注意的关于pointer-events的事项：
1.子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
2.如果你对一个元素设置了click事件监听器，然后你移除了pointer-events样式声明，或把它的值改变为auto，监听器会重新生效。基本上，监听器会遵守pointer-events的设定。
语法：
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默认值：auto
适用于：所有元素
继承性：有
动画性：否
计算值：指定值
取值：
auto：与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。其他值只能应用在SVG上。
说明：
设置或检索在何时成为属性事件的target。
- 使用
pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。 - 对应的脚本特性为pointerEvents。
兼容性：
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
#divTwo {
background: red;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
opacity: 0.3;
/*设置当前元素不参与鼠标事件*/
pointer-events:none;
}
</style>
</head>
<body>
<div id="divOne">
<a href="canvas1.html">连接1</a>
<br /><br />
<a href="pointer-events.html">连接2</a>
</div>
<div id="divTwo"></div>
</body>
</html>
结果：
pointer-events属性的更多相关文章
- 浏览器 Pointer Events
前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...
- 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 ...
- ExtJS笔记 Using Events
Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...
- jQuery1.9.1源码分析--Events模块
var rformElems = /^(?:input|select|textarea)$/i, rkeyEvent = /^key/, rmouseEvent = /^(?:mouse|contex ...
- touch pointer
在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...
- js中对节点属性的操作和对节点的操作
常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribut ...
- 浏览器的统一指针事件：Pointer Event
在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...
- 札记：android手势识别，MotionEvent
摘要 本文是手势识别输入事件处理的完整学习记录.内容包括输入事件InputEvent响应方式,触摸事件MotionEvent的概念和使用,触摸事件的动作分类.多点触摸.根据案例和API分析了触摸手势T ...
- jquery触屏幻灯片
一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...
- VNC常用操作及常见问题解决办法汇总
VNC登录用户缺省是root,但在安装oracle时必须用oracle用户的身份登录,下面我们就以oracle为例说明如何配置VNC,从而可以使用不同的用户登录到主机.步骤描述如下: 步骤一:修 ...
随机推荐
- 如何用angularjs制作一个完整的表格之二__表格分页功能
接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...
- php中const定义常量
const 常量 1.在定义时必须被初始值,2.前面不加任何修饰符3.变量名字母一般都大写4.常量可以被子类继承5.一个常量是属于一个类的,而不是某个对象的 作用:当某些值是固定不变的,就用const ...
- 弹出层iframe链接设置
jQuery 比较方便就是创建删除了,所以创建一个弹出层就是当点击div的时候创建一个新的div利用固定位fixed(与浏览器窗口有关)和z-index覆盖body 并利用opacity设置其透明度产 ...
- hdu 5125 magic balls
题意:求a数组的LIS,但是加了一个条件,为了LIS最大 b[i] a[i]可以交换.最多交换m次: 思路:我们令dp[i][j][l]表示i在最长上升子序列中,已经损失j点能量,第i个人转换了ai和 ...
- Cracking the coding interview--Q2.3
Implement an algorithm to delete a node in the middle of a singly linked list,given only access to t ...
- perl 分析mysql binlog
binlog 日志格式: use `zjzc`/*!*/; SET TIMESTAMP=1476326343/*!*/; UPDATE `ProductAccess` pa SET pa.access ...
- 【HDOJ】1271 整数对
枚举,假设这个数x=a*10^(i+1)+b*10^i+c,去掉b后y=a*10^i+c,x+y=n,则x+y=n(mod10^i),求出c,注意c<10^i,但2*c有可能大于10^i,因此分 ...
- BZOJ1533: [POI2005]Lot-A Journey to Mars
1533: [POI2005]Lot-A Journey to Mars Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 174 Solved: 76[S ...
- 两台windows服务器----SVN的迁移
两台服务器,进行SVN的迁移:系统平台:windows server 2003 版本库:test源服务器:192.168.1.14目标服务器:192.168.1.12源SVN版本库的path: D:\ ...
- win7 清理系统
1. 先用CCleaner等第三方软件清理一下.2. 将用户文件.我的文档.我的音乐.我的视频.桌面等路径更改到非系统分区(文件也会一并移动过去)3. 将系统盘的系统还原占用空间比减小,将大部分虚拟内 ...