现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript,它能够:

  • 阻止用户的点击动作产生任何效果
  • 阻止缺省鼠标指针的显示
  • 阻止CSS里的hoveractive状态的变化触发事件
  • 阻止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属性的更多相关文章

  1. CSS里一个奇怪的属性

    事情是这样的,在一个手机界面的制作中,我发现按钮点击后总会出现一个边框,于是开始搜索解决方案.搜到的解决方案是这样的. a:focus,input:focus{ -webkit-tap-highlig ...

  2. 使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

  3. H5_0026:使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

  4. css常见的易混淆属性和值的区别(一)

    css的属性很多,每一个属性的值也很多,组合起来便有成千上万种.不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言.下面对工作中常见的易混淆的属性和值进行总结: 1. lin ...

  5. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  6. 浏览器 Pointer Events

    前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...

  7. CSS里的 no-repeat 是什么意思

    CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平铺或者重复 ...

  8. canvas里设置width和css里设置width和js里设置width的区别

    canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...

  9. CSS里的 no-repeat

    简单来说,CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平 ...

随机推荐

  1. linux下QT Creator常见错误及解决办法

    最近因为在做一个关于linux下计算机取证的小项目,需要写一个图形界面,所以想到了用QT来写,选用了linux下的集成开发环境QT Creator5.5.1,但刚刚安装好,竟然连一个"hel ...

  2. 最牛逼android上的图表库MpChart(三) 条形图

    最牛逼android上的图表库MpChart三 条形图 BarChart条形图介绍 BarChart条形图实例 BarChart效果 最牛逼android上的图表库MpChart(三) 条形图 最近工 ...

  3. You know元音字母吗?

    所谓元音字母,或者母音字母,就是语言里起着发声作用的字母.在英语中,A.E.I.O.U属于元音字母,其中U是半元音开音节和闭音节为数不多的5个元音字母看似简单,他们却能像变戏子一样跟辅音组合拼读成不同 ...

  4. Bootstrap弹窗插件(拟态框)关闭后回调函数

    $(function(){ $('#questionnaire').on('hidden.bs.modal',function(){ //清除缓存方法 }); }); 事件 Bootstrap 的模态 ...

  5. curl命令 抓取网络数据相应头

    curl --verbose  --data "Password=123&Username=158101068&url=http://m.vancl.com/" & ...

  6. java判断身份证有效性

    import java.util.Calendar; public class CertNoUtil { public static boolean vIDNumByRegex(String idNu ...

  7. August 30th 2016 Week 36th Tuesday

    If you keep on believing, the dreams that you wish will come true. 如果你坚定信念,就能梦想成真. I always believe ...

  8. python基础——filter函数

    python基础——filter函数 Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函 ...

  9. jq 确定删除方法与文件删除

    var choice=confirm("您确认要删除吗?", function() { }, null);                if(choice)           ...

  10. mysqlbinlog 查看日志时发生报错

    [root@cs Downloads]# mysqlbinlog mysql-bin. ERROR: Error , event_type: ERROR: Could not read entry a ...