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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
PHP中的加密功能
2006/10/09 PHP
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
js函数返回多个返回值的示例代码
2013/11/05 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
np.dot()函数的用法详解
2020/01/17 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
暑期实践思想汇报
2014/01/06 职场文书
社会学专业求职信
2014/07/17 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
刘胡兰观后感
2015/06/16 职场文书