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的属性即可解决问题。

若有不对之处或其他更优雅的解决办法,欢迎各位的指正和交流。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366702.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

海思NB-IOT的SDK看门狗的使用

1. 看门狗需要喂狗,如果自己写的任务一直运行,那么空闲任务无法运行会导致看门狗复位,来看下看门狗的机制,首先系统启动的时候创建了空闲任务 在这个函数里面void vTaskStartScheduler( void )创建了下面的空闲任务 xReturn xTas…

分布式Session框架

分布式Session框架 配置服务器,Zookeeper集群管理服务器可以统一管理所有服务器的配置文件共享这些Session存储在一个分布式缓存中,可以随时写入和读取,而且性能要很好,如Memcache,Tair。封装一个类继承自HttpSession&…

向您的JVM添加一些熵

能否生成真正的随机数取决于系统中的熵。 有人声称,这可以通过掷骰子来保证。 其他人认为,用此主体替换OpenJDK的java.math.Random.nextInt()方法将有所帮助: public int nextInt() {return 14; }资料来源&#xff1a…

android源码多少行,Android源码资料

缺点:有时会访问不了优点:搜索方便,支持跳转引用)一个操作的小技巧,不想跳转引用的类覆盖当前页面,可以按下ctrl键点击。https://www.cnblogs.com/CVstyle/p/6395662.htmlhttps://www.jianshu.com/p/25a908c7eefaAndro…

Android初学第80天

Android初学第80天 20_MVVM 代码 BeatBox BeatBox.java package com.bignerdranch.android.beatbox;import android.content.Context; import android.content.res.AssetManager; import android.util.Log;import java.io.IOException; import java.util.ArrayList; import jav…

深入理解JavaScript之Event Loop

前言 最近阅读《高性能JavaScript》时,第六章谈到“通过定时器将JavaScript执行代码的控制权先让给浏览器用于更新UI状态,然后再将控制权交回给JavaScript代码,这样就可以使得页面更为流畅”,就联想到了之前理解的事件循环。 这…

使用EasyPoi导出Excel

Excel模板来自自己写死的一个excel模板,相当于是用户查询数据,数据填充到一个模板的Excel里,再导出Excel /*创建模板*/String a request.getSession().getServletContext().getRealPath("/resource/河南能源化工集团安全监控系统联网系统…

Hazelcast入门

7月,我写了一个博客向Java开发人员介绍erlang,重点介绍了这两种语言之间的一些异同。 erlang虚拟机具有许多令人印象深刻的内置功能,其中之一是它们独立于位置并且可以互相通信。 这意味着可以通过编写很少的代码行在VM之间同步数据。 如果您…

android手机最低内存,原神手机端需要哪些配置 手机端最低配置要求介绍

原神是一款由米哈游自主研发的全新开放世界冒险游戏,游戏最近迎来了pc端的首次测试,而且在不久之后就会开启原神手机端的公测版本,那么手机端需要什么配置呢?小编带来了详细的介绍。移动端预下载:9月25日下午16&#x…

AnswerOpenCV一周佳作欣赏(0615-0622)

一、How to make auto-adjustments(brightness and contrast) for image Android Opencv Image Correctionim using OpenCV for Android. I would like to know,how to make image correction(auto adjustments of brightness/contrast) for image(bitmap) in android via Open…

vuex最简单、最详细的入门文档

如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交…

Vue生命周期详解 对应代码解析

-使用GitHub阅览 对于Vue的实例,比如 const app new Vue({...})浏览器解析到这段代码的时候,自动执行beforeCreate > created > beforeMount > mounted方法,每当data的某个属性值更改了,比如app.mes "hi"&…

所有其他指标均无用

对于队列,无论是实现为JMS ,数据库表(即Ruby的Delayed :: Job用于队列的什么),甚至是Amazon的SQS ,用于评估队列状态的最常见指标是其长度。 从本质上讲,可以基于在任何给定时间队列中驻留多少消…

类似苹果数据线的android,除了常见的安卓、苹果、Type-c,还有哪些你不知道的手机数据线?...

随着智能手机日益发展,辅助智能手机的数据线配件也越来越多样。现在我们最常见的无非就是标准Micro usb口、正反随便插的Type-c接口、还有苹果Lightning数据线,那么除了这些类型数据线,你知道如今市面上还有哪些更方便好用的手机数据线吗&…

团体程序设计天梯赛L3-019 代码排版(23分)

打算学完编译原理后再次实现它。。。 以下为比较“杂乱”的方法: 海量数据: https://pan.baidu.com/s/1Prd0ZqNLoCLLvXyJjCef3w 如果大家有发现这个程序的问题,请联系我,谢谢啦~~~ 我很疑惑,不知道错在哪里&#xff0c…

canvas入门实战--邀请卡生成与下载

1.前言 写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是javascript。canvas的用途非常的广,特别是html5游戏以及数据可视化这两个方面。现在can…

javascript 数组求交集/差集/并集/过滤重复

最近在小一个小程序项目,突然发现 javscript 对数组支持不是很好,连这些基本的功能,都还要自己封装.网上查了下,再结合自己的想法,封装了一下,代码如下. //数组交集 Array.prototype.intersect function(){let mine this.concat();for (var i 0; i < arguments.length; …

Apache ActiveMQ 5.9发布

Apache ActiveMQ团队刚刚发布了新的ActiveMQ 5.9版本 。 Apache ActiveMQ 5.9发布 自从先前的5.8版本以来&#xff0c;此版本是8个月的辛苦工作。 在此发行版中&#xff0c;我们将像往常一样对代理进行增强&#xff0c;并使用最新的协议&#xff08;例如AMQP和MQTT&#xff…

android 美颜录像,Android 关于美颜/滤镜 利用PBO从OpenGL录制视频

前言上次我写了一遍文章《Android 关于美颜/滤镜 从OpenGl录制视频的一种方案》&#xff0c;里面利用ImageReader来从获取Surface上获取数据&#xff0c;但是经过熊皮皮的提醒&#xff0c;我发现多PBO的确可以实现跟ImageReader一样的效果&#xff0c;并且版本要求仅为Android4…

DAY77-Django框架(八)

今日内容&#xff1a;创建多表模型、多表数据操作、基于对象的跨表查询、基于双下划线的跨表查询 一、创建多表模型 class Author(models.Model):# id如果不写,会自动生成,名字叫nid,并且自增id models.AutoField(primary_keyTrue)name models.CharField(max_length32)sex m…