CSS 点击穿透pointer-events
在项目中,当需要展示一个元素在最顶层,但又不想让它影响下层的交互,可以pointer-events:none
pointer-events介绍
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
属性值auto 、none用于元素是否可以接收事件,上面其它的属性和我们没关系,是svg相关的。
- auto — 默认值auto,鼠标不会穿透当前层。
- none — 元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
pointer-events使用
1. auto和none可以配合着用
比如一个环形饼图的组件,环外和环内点击时触发的是下层元素,就可以先在组件的环外、环上、环内元素上,依次设置none、auto、none。
2. 有些场景使用pointer-events:none,非常有效。
- <a>标签,设置了自动跳转,通过设置pointer-events就可以动态禁用<a>的点击事件。
- 滚动列表需要一个渐变色蒙层,这个蒙层又不能影响列表的操作 -- 设置 pointer-events就很有用
pointer-events兼容性
chrome、Edge是支持的,IE要11。
IE9等某些浏览器不支持,浏览器是否支持pointer-events,可以通过下面方法验证:
1 isSupportPointerEvents() { 2 var dummy = document.createElement('_'); 3 if (!('pointerEvents' in dummy.style)) return false; 4 dummy.style.pointerEvents = 'auto'; 5 dummy.style.pointerEvents = 'x'; 6 document.body.appendChild(dummy); 7 var isSupported = getComputedStyle(dummy).pointerEvents === 'auto'; 8 document.body.removeChild(dummy); 9 return isSupported; 10 }
参考列表:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2019-01-21 C# 切换中英文输入法