如何在CSS中使用pointer-events属性 - 行业资讯 - 肥雀云

　　介绍

今天就跟大家聊聊有关如何在CSS中使用pointer-events属性,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

在关闭弹层时,以渐隐动画效果为例,我这里是利用透明度从1→0的过程模拟逐渐消失的动画过程,容器是弹层组件最外层容器:

.container { 　　,,,位置:,固定; 　　,,,左:,0; 　　,,,:,0; 　　,,,宽度:,100%; 　　,,,身高:,100%; 　　,,,z - index:, 9999; 　　动画:,,,,.5s fadeOut 向前; 　　} 　　@keyframes fadeOut { 　　,,,0%,{ 　　,,,,,,,不透明度:,1; 　　,,,} 　　,,,100%,{ 　　,,,,,,,,不透明度:0; 　　,,,} 　　}

问题是不透明度为0只是容器内的元素透明不可见的,容器仍然存在于dom节点中。当我们给弹层的蒙层面具绑定关闭事件时,由于容器的z - index非常大,点击事件都会触发在面具上。

<强> transitionend和animationend事件

为了解决上述问题,同时让用户体验更好,我们可以通过监听transitionend和animationend事件等动画效果执行完再将容器节点隐藏(display: none)。这样就不会出现面具拦截点击事件的问题了。

<强>简介

采用CSS技术生成的动画效果,我们可以在JS中捕获动画或变换的结束事件:transitionend和animationend事件标准的浏览器事件.transitionend事件会在CSS转换结束后触发。

animationend事件会在一个CSS动画完成时触发(不包括完成前就已终止的情况,例如元素变得不可见或者动画从元素中移除)。

代码示例:

/* 　　,*在容器元素上监听transitionend事件　　,*,然后指定一个函数,,例如,showMessage () 　　,*/function showMessage (), { 　　,,,console.log (& # 39; Transition 已完成& # 39;); 　　} 　　var element =, . getelementbyid (“container"); 　　element.addEventListener (“transitionend", showMessage,,假),

<强>浏览器兼容性

以transitionend事件为例,animationend事件相似。

<李>

用户界面事件,如鼠标点击

<李>

动态伪类(即。:,:积极和:焦点;(CSS2), 5.11节)

<李>

超链接

简而言之,pointer-events CSS属性指定在什么情况下(如果有)某个特定的图形元素可以成为鼠标事件的目标。

<强>规范

HTML元素的扩展,虽然出现在早期的草稿CSS基本用户界面模块3级,一直推到4级。

它主要针对的是SVG,但已经扩展到其他html元素。

<强>语法

/*, Keyword values */pointer-events:汽车; 　　pointer-events:没有; 　　pointer-events: visiblePainted;,/*, SVG only */pointer-events: visibleFill;,,,,/*, SVG only */pointer-events: visibleStroke;,,/*, SVG only */pointer-events:可见,,,,,,,,,/*,SVG only */pointer-events:画,,,,,,,,,/*,SVG only */pointer-events:填满,,,,,,,,,,,,/*,SVG only */pointer-events:中风;,,,,,,,,,/*,SVG only */pointer-events:,,,,,,,,,,,,,,/*, SVG only */

比如说,pointer-events: visibleFill;

这个只适用于SVG,只有在元素的可见性属性为可见时,且鼠标指针在元素内部时,元素才会成为鼠标事件的目标,填补属性不影响事件处理。

其他只适用于SVG的属性介绍不再赘述,可以参考这里。

在这里我们更关注[汽车|没有]两个属性值。这两个属性值用在其他html元素上也很有意思。