CSS里的pointer-events属性
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout
属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events
的风格更像JavaScript,它能够:
- 阻止用户的点击动作产生任何效果
- 阻止缺省鼠标指针的显示
- 阻止CSS里的
hover
和active
状态的变化触发事件 - 阻止JavaScript点击动作触发的事件
一个CSS属性能做所有的这么多事情!
这个pointer-events
属性有很多可以使用的属性值,但大部分都是针对SVG的:auto
, none
, visiblePainted*
, visibleFill*
, visibleStroke*
, visible*
, painted*
, fill*
, stroke*
, all*
, 以及 inherit
。其中none
值能阻止点击、状态变化和鼠标指针变化:
.disabled { pointer-events: none; }
一些需要注意的关于pointer-events
的事项:
- 子元素可以声明
pointer-events
来解禁父元素的阻止鼠标事件限制。 - 如果你对一个元素设置了click事件监听器,然后你移除了
pointer-events
样式声明,或把它的值改变为auto
,监听器会重新生效。基本上,监听器会遵守pointer-events
的设定。
我第一次注意到pointer-events
属性是在Firefox Marketplace网站上,他们拿它来禁止按钮的点击,这样的好处是样式上也得到了控制。当然,不要使用pointer-events
来屏蔽一些十分关键的触发动作,因为这个样式可以通过浏览器控制台删除掉!
CSS里的pointer-events属性的更多相关文章
- CSS里一个奇怪的属性
事情是这样的,在一个手机界面的制作中,我发现按钮点击后总会出现一个边框,于是开始搜索解决方案.搜到的解决方案是这样的. a:focus,input:focus{ -webkit-tap-highlig ...
- 使用CSS里的user-select属性控制用户在页面上选中的内容
CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...
- H5_0026:使用CSS里的user-select属性控制用户在页面上选中的内容
CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...
- css常见的易混淆属性和值的区别(一)
css的属性很多,每一个属性的值也很多,组合起来便有成千上万种.不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言.下面对工作中常见的易混淆的属性和值进行总结: 1. lin ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- 浏览器 Pointer Events
前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...
- CSS里的 no-repeat 是什么意思
CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平铺或者重复 ...
- canvas里设置width和css里设置width和js里设置width的区别
canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...
- CSS里的 no-repeat
简单来说,CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平 ...
随机推荐
- linux下QT Creator常见错误及解决办法
最近因为在做一个关于linux下计算机取证的小项目,需要写一个图形界面,所以想到了用QT来写,选用了linux下的集成开发环境QT Creator5.5.1,但刚刚安装好,竟然连一个"hel ...
- 最牛逼android上的图表库MpChart(三) 条形图
最牛逼android上的图表库MpChart三 条形图 BarChart条形图介绍 BarChart条形图实例 BarChart效果 最牛逼android上的图表库MpChart(三) 条形图 最近工 ...
- You know元音字母吗?
所谓元音字母,或者母音字母,就是语言里起着发声作用的字母.在英语中,A.E.I.O.U属于元音字母,其中U是半元音开音节和闭音节为数不多的5个元音字母看似简单,他们却能像变戏子一样跟辅音组合拼读成不同 ...
- Bootstrap弹窗插件(拟态框)关闭后回调函数
$(function(){ $('#questionnaire').on('hidden.bs.modal',function(){ //清除缓存方法 }); }); 事件 Bootstrap 的模态 ...
- curl命令 抓取网络数据相应头
curl --verbose --data "Password=123&Username=158101068&url=http://m.vancl.com/" & ...
- java判断身份证有效性
import java.util.Calendar; public class CertNoUtil { public static boolean vIDNumByRegex(String idNu ...
- August 30th 2016 Week 36th Tuesday
If you keep on believing, the dreams that you wish will come true. 如果你坚定信念,就能梦想成真. I always believe ...
- python基础——filter函数
python基础——filter函数 Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函 ...
- jq 确定删除方法与文件删除
var choice=confirm("您确认要删除吗?", function() { }, null); if(choice) ...
- mysqlbinlog 查看日志时发生报错
[root@cs Downloads]# mysqlbinlog mysql-bin. ERROR: Error , event_type: ERROR: Could not read entry a ...