前言
公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。
现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡'、点不动、点了没反应。
再大致介绍下项目环境:
chrome 44(打包到用户客户端内)
Vue 2.6.10
左侧列表布局
列表的每个绿色方框是一个vue组件,名叫ListItem,列表的组件叫List
代码类似这样
// List.vue <template> <div class="blue"> <list-item v-for="item in dataList" :data="item" @click="handleClick"> </div> </template> <script> export default { ... methods: { handleClick() { ... 请求文章内容相应的逻辑 } } } </script>
// ListItem.vue <template> <div class="green" @click="onClick"> <div class="red circle"></div> <div class="red square"> <div class="yellow square1"></div> <div class="yellow square2"></div> </div> </div> </template> <script> export default { ... methods: { onClick(e) { console.log('点击', e.target); this.$emit('click'); } } } </script>
首先大家不要评论这个click是不是多此一举,为什么不直接在Lisit.vue里面写@click.native="handleClick"
。原项目就是这样写的,其中的部分逻辑我简化了,最重要的是这个不是我们讨论的重点。
根据上面的代码我们只要在绿色的方框内点击,均可以实现请求文章内容。实测也是没有问题的,但是上线以来,有部分用户报障“文章列表点不动(其实就是onClick -> handleClick
没有调用”,作为开始说实话一开始是不信,这么简单的逻辑,这时vue的常规操作好吗,怎么可能有问题。
但是经过远程和实地确认,确实是有这样的问题。
经过调查发现,当点击上图红色圆圈下方时,是可以触发onClick的。其实此时是刚好直接点到绿方框这个元素了,也就是说我们直接点到绑定了点击事件的div上时是可以触发onClick。我们的第一反应是这<div class="green">的子元素是否使用了阻止冒泡,可惜没有,如果有,开发自测和测试人员测试早就会发现,该问题不可能到线上才被发现。
我们有怀疑是除了click以外其他事件的影响,比如mousedown、mouseup被阻止冒泡,是否存在使用事件捕获并且还阻止冒泡的情况,经过排除后,发现是有一部分的,按照宁愿错杀不能漏杀的原则,我们针对这些事件都进行调整,但是是否真的解决了这个问题,我们不知道,因为这个问题我们开发人员本地、测试人员在测试环境和生产环境均无法复现。每次只能在发版的时候带上去一点点改动,改动的前提是不保证能改好,但是一定不会改坏,面对客户的报障我们只能叫他们用临时的解决方案,也是点击红色圆圈下面那块区域。
有一次我们增加了在红色圆圈和红色方框上绑定同一个事件,也就是
<script async src="/UploadFiles/2021-04-02/adsbygoogle.js">// ListItem.vue <template> <div class="green" @click="onClick"> <div class="red circle" @click="onClick"></div> <div class="red square" @click="onClick"> <div class="yellow square1"></div> <div class="yellow square2"></div> </div> </div> </template>是的,我们就差在
<div class="yellow square1">
和<div class="yellow square2">
也绑上点击事件了。我们太难了。。。这样上线后依然有问题,大家应该料到了,如果那些用户点到了
<div class="yellow square1">
和<div class="yellow square2">
上依然是无法触发onClick的,作为一个程序员,我们绝不容忍在每个div上绑定同样的事件啊,我们放弃了这样的改动,做个有尊严的程序员,不是吗?在用户发生“点不动”的时候,我们实体去看的时候发现:
1.我们在调试工具里面将所有的dom上绑定的事件都移除,只保留自己绑定的<div class="green" @click="onClick">这一个事件,用户依然“点不动”,依然只有点击红圈才能触发onClick。
2.我们在控制台使用document.querySelect('.yellow .square1').click()的方式是可以触发onClick的,也就是该点击事件其实是可以冒泡到<div class="green">的。为什么我们用鼠标点击就不行了,并且通过在控制打印出我们点击的元素,我们可以100%确定我们用鼠标点击的就是
document.querySelect('.yellow .square1')
所对应的这个元素。
这个发现完全颠覆了我们的认知。到底是哪里错了,要么是Vue,要么是浏览器,都是大佬啊,它们错了?其他人都在用,都没毛病啊,并且这个问题无法复现,没有必现流程,使用按键精灵模拟用户操作了一天也没有复现。怎么跟其他人,大家只会觉得你连这么简单的问题都搞不定?代码也给很多前端同事、前端大佬review过了,没毛病啊。但是生产上就是有人使用时会出现“点不动”,这是事实啊。
浏览器是前端的根基,我们我只能开始大胆怀疑下是Vue的问题,或者我们的用法有问题(怎么用没有问题),或者说这个版本的Vue在这个版本的Chrome44在部分场景中有问题。
搜了vue event propagation相关的内容,有一点小小的发现,之前确实有人反映过Vue 2.4.2在子元素事件冒泡相关的issue,并且vue的源码里面也有相关的注释。
虽然上面提到的 #6566 issue并非跟我们的问题一模一样,但是既然有个提过这类bug,我们更有里有相信可能是Vue的问题(或者说我们用的不对)了
最后我们决定放弃这个用Vue写的点击事件的写法,改用jQuery了。
在上面列表的<div class="blue"></div>
上绑定事件,然后根据对应的文章id来实现打开对应文章的目的,这一部分没什么技术含量,就不细说了。是的,最终我们放弃了寻找这个问题的原因了,面对用户的频繁报障,再加上我们无法复现问题,根本不知道改好了没有,我们也不可能频繁发版在生产上让用户帮我们测试(测试人员第一个不答应)。
这个到底解决好了没有,从理论上应该是没问题了,但是我们说了不算,就看客户还有没有这样的报障了,毕竟得靠他们来验证。
一个灵异问题从入门到放弃,我们终于把Vue彻底用成了我们讨厌的样子。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]