2024-4-10关于父子节点在页面中重叠问题的解决方案

1.发现的问题

测试同事在测试环境下发现点击以下热区蓝色文案区域的时候跳去A页面,点击紫色区域空白有时候跳入B页面。 由于此组件是多页面共用组件,经过和线上生产环境其他页面对比情况后,线上逻辑是无论点击热区的任一部分都是跳去A页面。 我以为是别的需求变动导致的问题。遂仔细寻找问题的原因。

2.定位问题并寻找导致问题的原因

首先查看测试环境的代码改动记录,发现相关模块并没有改动记录。

于是本人便根据gitlog 的file记录寻找近期变动如下。

发现近期1个月内的代码变更是本人改写的。于是本人尝试注释掉新增代码区域(黄色区域),发现上述问题并没有复现!

本次实现需求的方法是创建一个伪元素,再贴上背景图便可以实现一个背景icon的样式。以下是元素css样式。

css 复制代码
.fake-element{
background: url('../star.png');
background-repeat: no-repeat;
background-size: contain;
background-position-x: 100%;
margin-top: -182px;
margin-right: -32px;
height: 182px;
}

考虑到热区无文案区域(紫色区域)刚刚和伪元素区域重叠,点击伪元素区域和热区是同一层级并且伪元素区域没有点击事件。点击伪元素和热区重叠区域时有可能是dom向上冒泡到父节点的点击事件。找到原因后便开始寻求解决办法。

蓝色区域为伪元素

3.问题的解决方案

3.1 阻止事件向上冒泡

给伪元素的点击事件添加一个禁止向上冒泡的方法,但是使用后发现点击热区和伪元素重叠区域不会转跳到A页面也不会转跳到B页面。

js 复制代码
        <View 
            onClick={(e): void => {
                e.preventDefault();
                e.stopPropagation();
            }}
            className={styles.fake-element}
            >
         </View>

3.2 通过绝对定位修改相应层级

以下是热区样式

js 复制代码
   .hot-area{
       position:absolute;
       z-index:2;
       ... //此处省略热区其他内容样式
   }

以下是伪元素样式

js 复制代码
   .fake-element{
        position:absolute;
        z-index:1;
        ... //此处省略伪元素其他内容样式
    }

虽然问题解决了,但是页面需要重新排版。由于热区是绝对定位,所以还得修改父节点预留空间给热区展示。考虑到尽量做到较少改动来实现需求,这个方案放弃。

3.3 为元素添加point-event属性

后面参考了别的同事代码,发现设置point-event属性就可以实现我们想要的效果。

js 复制代码
   .fake-element{
       point-event:none;
       ... //此处省略伪元素其他内容样式
   }

4.总结

在遇到问题时多一些寻求解决方案,并且要考虑到最小成本改动来解决问题。

相关推荐
余道各努力,千里自同风几秒前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟9 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾31 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧39 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools