CSS pointer-events属性的用法是怎样,应用场景是什�

Admin 2022-06-11 群英技术资� 107 次浏�

这篇文章给大家介绍了“CSS pointer-events属性的用法是怎样,应用场景是什么”的相关知识,讲解详细,步骤过程清晰,有一定的借鉴学习价值,因此分享给大家做个参考,感兴趣的朋友接下来一起跟随小编看看吧�

在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似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:

  • user interface events such as mouse clicks
  • dynamic pseudo-classes (i.e., :hover, :active and :focus; [CSS2], section 5.11)
  • hyperlinks

简而言之,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的属性即可解决问题�


以上就是关于“CSS pointer-events属性的用法是怎样,应用场景是什么”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注群英网络,小编每天都会为大家更新不同的知识�
标签� pointer-events

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部