
详解css3 pointer-events(阻止hover、active、onclick等触发事件)
pointer-events
更像是JavaScript,它能够:
- 阻止用户的点击动作产生任何效果
- 阻止缺省鼠标指针的显示
- 阻止CSS里的
hover
和active
状态的变化触发事件 - 阻止JavaScript点击动作触发的事件
实际代码使用中案例:
1、提交页面,提交按钮点击后,添加这个样式属性(style="pointer-events"),来防止重复提交。
2、一些层的绝对定位,覆盖按钮,穿透可以点击它。等等。
来看下具体用法:
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
pointer-events属性值详解
- auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
- none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
- 其它属性值为SVG专用,这里不再多介绍了。
浏览器兼容性
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性,IE6/7/8/9都不支持(IE11又支持,不过很好的一点是在ie中给a加disabled 点击事件自动无效。),Opera在SVG中支持。 但是 该属性HTML中 不支持 。
============ 欢迎各位老板打赏~ ===========


与本文相关的文章
- · 如何用一行 CSS 分别实现 10 种现代布局?
- · Flex 布局教程:语法篇
- · 分享一个CSS3边框旋转特效
- · CSS3背景图片缩放动画
- · Nest.js 、 Next.js、 Nuxt.js的区别
- · 小程序可以绑定其它小程序吗?
- · vue3+vite+多环境发面到二级目录配置
- · 微信小程序防止事件穿透防止事件冒泡
- · 普通链接二维码跳转小程序
- · 解决flex-direction: column 之后元素宽度自动变为100%
- · vue/react/node/vite/npm/yarn build自动更新版本号
- · getVisitDistribution 访问来源定义(访问来源 key 对应关系)