Vue在chrome44偶现点击子元素事件无法冒泡的解决方法


Posted in Javascript onDecember 15, 2019

前言

公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。
现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡'、点不动、点了没反应。

再大致介绍下项目环境:

chrome 44(打包到用户客户端内)
Vue 2.6.10

左侧列表布局

Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

列表的每个绿色方框是一个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="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
   google_ad_client: "ca-pub-3013839362871866",
   enable_page_level_ads: true
  });
</script>
// 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的源码里面也有相关的注释。

Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

虽然上面提到的 #6566 issue并非跟我们的问题一模一样,但是既然有个提过这类bug,我们更有里有相信可能是Vue的问题(或者说我们用的不对)了

最后我们决定放弃这个用Vue写的点击事件的写法,改用jQuery了。
在上面列表的<div class="blue"></div>上绑定事件,然后根据对应的文章id来实现打开对应文章的目的,这一部分没什么技术含量,就不细说了。

是的,最终我们放弃了寻找这个问题的原因了,面对用户的频繁报障,再加上我们无法复现问题,根本不知道改好了没有,我们也不可能频繁发版在生产上让用户帮我们测试(测试人员第一个不答应)。

这个到底解决好了没有,从理论上应该是没问题了,但是我们说了不算,就看客户还有没有这样的报障了,毕竟得靠他们来验证。

一个灵异问题从入门到放弃,我们终于把Vue彻底用成了我们讨厌的样子。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
layui弹出层效果实现代码
May 19 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
Angular6项目打包优化的实现方法
Dec 15 #Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 #Javascript
Vue+ElementUI table实现表格分页
Dec 14 #Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 #Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 #Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 #Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 #Javascript
You might like
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
动态加载iframe
2006/06/16 Javascript
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
实习求职信
2013/12/01 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
解决python3安装pandas出错的问题
2021/05/20 Python
Golang的继承模拟实例
2021/06/30 Golang