CSS 特殊属性介绍之 pointer-events
首先看一下 MDN 上关于 pointer-events 的介绍:
CSS属性
pointer-events
允许作者控制特定的图形元素在何时成为鼠标事件的 target。当未指定该属性时,SVG 内容表现如同visiblePainted
。除了指定元素不成为鼠标事件的目标,
none
值还指示鼠标事件穿过该元素,并指向位于元素下面的元素。
官方的中文翻译比较文艺,要多读几遍才能明白什么意思。
pointer-events 主要的用途还是穿透元素。直接看下面的示例。
示例
创建两个 div 元素,在每个 div 元素上面添加一个遮罩层,其中的文字被盖住了。为了显得有文艺范,div 中的内容引用了莎士比亚的十四行诗。正常情况如下,因为 div 上面有遮罩层,所以无法选中文字。
Shall I compare thee to a summer's day? Thou art more lovely and more temperate: Rough winds do shake the darling buds of May, And summer's lease hath all too short a date: Sometime too hot the eye of heaven shines, And often is his gold complexion dimm'd; And every fair from fair sometime declines, By chance or nature's changing course untrimm'd; But thy eternal summer shall not fade Nor lose possession of that fair thou owest; Nor shall Death brag thou wander'st in his shade, When in eternal lines to time thou growest: So long as men can breathe or eyes can see, So long lives this and this gives life to thee.
添加 pointer-events: none
之后,就可以穿透遮罩层顺利拷贝文字了。
我想将你比作迷人的夏日, 但汝却更显可爱和温存: 狂野之风摧残着五月蓓蕾的柔媚, 也一天天消逝着夏日的归期: 苍天的明眸偶然泻出璀璨, 却难以辉映他暗淡的容颜; 一切明媚的色彩渐已消褪, 过程是如此苍白; 然而你却如永恒之夏, 所有的美好永远也不会改变; 就连死神也不敢对你嚣张, 因你将永生于不朽的诗篇: 只要世人一息尚存, 你将和这诗篇永驻人间。
总结
除了常用的 pointer-events: none
之外,还有很多其他参数。关于 pointer-events 详细介绍可以参考 MDN 上的内容。工作当中有很多应用场景,比如一些可以点击的商品图片,如果设计师在图片上设计了遮罩层,那使用 pointer-events 的属性无疑会很简单。
感谢您的阅读,如果您对我的文章感兴趣,可以关注我的博客,我是叙帝利,下篇文章再见!
开发低代码平台的必备拖拽库 https://github.com/ng-dnd/ng-dnd
低代码平台必备轻量级 GUI 库 https://github.com/acrodata/gui
适用于 Angular 的 CodeMirror 6 组件 https://github.com/acrodata/code-editor
基于 Angular Material 的中后台管理框架 https://github.com/ng-matero/ng-matero
Angular Material Extensions 扩展组件库 https://github.com/ng-matero/extensions
Unslider 轮播图插件纯 JS 实现 https://github.com/nzbin/unsliderjs
仿 Windows 照片查看器插件 https://github.com/nzbin/photoviewer
仿 Windows 照片查看器插件 jQuery 版 https://github.com/nzbin/magnify
完美替代 jQuery 的模块化 DOM 库 https://github.com/nzbin/domq
简化类名的轻量级 CSS 框架 https://github.com/nzbin/snack
与任意 UI 框架搭配使用的通用辅助类 https://github.com/nzbin/snack-helper
单元素纯 CSS 加载动画 https://github.com/nzbin/three-dots
有趣的 jQuery 卡片抽奖插件 https://github.com/nzbin/CardShow
悬疑科幻电影推荐 https://github.com/nzbin/movie-gallery
锻炼记忆力的小程序 https://github.com/nzbin/memory-stake