每天小笔记之判断某个元素是否被覆盖简便办法

嘿吖嘿嘿~

已于 2023-02-16 16:03:18 修改

阅读量577

点赞数

文章标签： javascript 前端开发语言

于 2023-02-16 14:48:27 首次发布

本文链接：https://blog.youkuaiyun.com/taozi550185271/article/details/129025862

版权

文章探讨了CSS中的transform和position对性能的影响，解析了硬件加速的工作原理，提示了如何强制使用GPU进行渲染。同时，介绍了利用elementFromPoint检测元素是否被覆盖的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/** sleep函数，1秒请求一次就好 */
const sleep = () => new Promise(resolve => setTimeout(resolve, 1000));

浅析CSS的性能优化：transform与position区别、硬件加速工作原理及注意事项、强制使用GPU渲染的友好CSS属性

判断某个元素是否被覆盖，如下例中class为mapboxgl-canvas的元素：

 const rect = document.querySelector('.mapboxgl-canvas').getBoundingClientRect();
 const x = rect.left;
 const y = rect.top;
 const topElt = document.elementFromPoint(x, y);
 // 如果被覆盖则返回
 if (document.querySelector('.mapboxgl-canvas').isSameNode(topElt)) {
   return;
 }else{
 	//否则继续执行一下代码；
 }