CSS pointer-events属性的用法是怎样,应用场景是什�
Admin 2022-06-11 群英技术资� 107 次浏�
在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似native的感觉。其中动画是最常用的方法�
这里的需求是,弹层的设计,这个弹层希望可以像 native 上的弹层一样,点击按钮出现,点击遮罩或按钮时关闭,并且出现和关闭时有动画效果(fade,slide等)�
问题
在关闭弹层时,以fadeOut动画效果为例,我这里是利用opacity�1 -> 0的过程模拟逐渐消失的动画过程,container是弹层组件最外层容器�
.container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; animation: .5s fadeOut forwards; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
问题是opacity�0只是container内的元素透明不可见的,container仍然存在于dom节点中。当我们给弹层的蒙层mask绑定关闭事件时,由于container的z-index非常大,点击事件都会触发在mask上�
transitionend和animationend事件
为了解决上述问题,同时让用户体验更好,我们可以通过监听transitionend和animationend事件等动画效果执行完再将container节点隐藏(display:none)。这样就不会出现mask拦截点击事件的问题了�
简�
采用CSS技术生成的动画效果,我们可以在JS中捕获动画或变换的结束事件:transitionend和animationend事件标准的浏览器事件。transitionend 事件会在 CSS transition 结束后触发�
animationend 事件会在一� CSS 动画完成时触发(不包括完成前就已终止的情况,例如元素变得不可见或者动画从元素中移除)�
代码示例�
/* * 在container元素上监听transitionend事件 * 然后指定一个函�, 例如 showMessage() */ function showMessage() { console.log('Transition 已完�'); } var element = document.getElementById("container"); element.addEventListener("transitionend", showMessage, false);
浏览器兼容�
以transitionend事件为例,animationend事件相似�
可以看出,在WebKit浏览器里仍然需要使用webkit前缀,所以我们需要根据各种浏览器分别检测事件�
缺点
我的需求是,这个弹层组件可能会频繁调用,即用户关闭弹层后,会再次打开�
使用这种,通过监听动画结束事件,在display:none和display:block之间切换,但是这会增加浏览器渲染(重绘和重排)成本,且要考虑浏览器兼容性,需要根据各种浏览器分别检测事件�
pointer-events CSS 属�
有没有更优雅更简单的解决呢?下面介绍我们的主角:pointer-events�
需要注意的是,这个pointer-events不同于Pointer Events(用于处理来自设备(包括鼠标,笔,触摸屏等)的硬件指针输入的事件和相关接口)�
简�
The ‘pointer-events� property specifies under what circumstances a given graphics element can be the target element for a pointer event. It affects the circumstances under which the following are processed:
简而言之,pointer-events CSS 属性指定在什么情况下 (如果�) 某个特定的图形元素可以成为鼠标事件的 target�
规范
Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.
它主要针对的是SVG,但已经扩展到其他html元素�
语法
/* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only */ pointer-events: painted; /* SVG only */ pointer-events: fill; /* SVG only */ pointer-events: stroke; /* SVG only */ pointer-events: all; /* SVG only */
比如说,pointer-events: visibleFill;
这个只适用于SVG,只有在元素的visibility属性为visible时,且鼠标指针在元素内部时,元素才会成为鼠标事件的目标,fill属性不影响事件处理�
其他只适用于SVG的属性介绍不再赘述,可以参� 这里 �
在这里我们更关注[auto|none]两个属性值。这两个属性值用在其他html元素上也很有意思�
当值为auto时。与pointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同�
当值为none时,元素永远不会成为鼠标事件的target。换而言之,值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西�
浏览器兼容�
可以看出,pointer-events兼容绝大多数移动端浏览器,且没有前缀要求�
注意的点
当pointer-events值为none时,不一定说明该元素的事件监听事件永远不会被触发。如果他的子元素有明确的设定pointer-events属性,且指定自己能成为鼠标事件的目标,那么触发的过程会通过事件冒泡传到父元素,父元素的事件监听事件就会被触发�
总结
在弹层组件可能会频繁调用的情况下,使用pointer-events,即点击遮罩或按钮时关闭时,设置container动画效果和pointer-events:none,弹层出现时,再设置pointer-events:auto。这样只需改变css的属性即可解决问题�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
小编今天来给大家说说看关于HTML表格标记入门知识之水平对齐属性的相关内容,本文具有一定参考价值,希望能帮助到有需要的朋友们�
这篇文章给大家分享的是CSS中counter计数器与content属性的相关内容。小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧�
HTML+CSS怎样实现给边框添加角的效果?下文有详细的介绍,小编觉得挺实用的,对大家学习或工作或许有帮助,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获�
今天给大家分享一个用css3实现的莲花盛开的动画效果,小编觉得比较有意思,因此分享给大家做个参考,对新手学习CSS3的使用也有一定的帮助,感兴趣的朋友接下来跟随小编一起看看吧�
在css3中,可以利用animation-iteration-count属性来设置动画执行一次,该属性的作用就是定义动画的播放次数;当animation-iteration-count属性的值设置为数字�1”时,即可设置动画只播放一次�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078