CSS的pointer-events属性详细介绍(作用和注意事项)


Posted in HTML / CSS onApril 23, 2014

而本文要说的pointer-events的风格更像JavaScript,它能够:

1.阻止用户的点击动作产生任何效果
.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件

一个CSS属性能做所有的这么多事情!

The CSS

这个pointer-events属性有很多可以使用的属性值,但大部分都是针对SVG的:auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。其中none值能阻止点击、状态变化和鼠标指针变化:

复制代码
代码如下:
.disabled { pointer-events: none; }

一些需要注意的关于pointer-events的事项:

1.子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
2.如果你对一个元素设置了click事件监听器,然后你移除了pointer-events样式声明,或把它的值改变为auto,监听器会重新生效。基本上,监听器会遵守pointer-events的设定。

测试代码:

复制代码
代码如下:

<p>下面的这个链接上的 <code>pointer-events</code>属性值是<code>none</code>。点击它们,什么都不会发生。我还在“测试”链接上添加了监听器。如果<code>pointer-events</code>的值是<code>none</code>,对话框就不会弹出来,你可以在console里修改它的值,这样点击后就会弹出对话框!</p>

<p><a href="javascript:;" id="testLink" style="pointer-events:none;">测试</a></p>

<p><a href="javascript:;" class="pointerLogo" style="pointer-events:none;">测试</a></p>

<script type="text/javascript">
document.getElementById("testLink").addEventListener("click", function(e) {
alert("点击了!");
});
</script>

我第一次注意到pointer-events属性是在Firefox Marketplace网站上,他们拿它来禁止按钮的点击,这样的好处是样式上也得到了控制。当然,不要使用pointer-events来屏蔽一些十分关键的触发动作,因为这个样式可以通过浏览器控制台删除掉!

HTML / CSS 相关文章推荐
CSS3 圆角效果
Jul 15 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 #HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 #HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 #HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 #HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 #HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 #HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
You might like
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
js实现简易计算器功能
2019/10/18 Javascript
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python实现K最近邻算法
2018/01/29 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
2014年教师培训的自我评价
2014/01/03 职场文书
英语专业自荐书
2014/06/13 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
爱晚亭导游词
2015/02/09 职场文书