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

这篇文章主要介绍“Vue在chrome44偶现点击子元素事件无法冒泡怎么解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue在chrome44偶现点击子元素事件无法冒泡怎么解决”文章能帮助大家解决问题。

10年积累的网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先建设网站后付款的网站建设流程，更有巢湖免费网站建设让你可以放心的选择与我们合作。

前言

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

再大致介绍下项目环境：

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

左侧列表布局

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

列表的每个绿色方框是一个vue组件，名叫ListItem，列表的组件叫List

代码类似这样

// List.vue

// ListItem.vue

首先大家不要评论这个click是不是多此一举，为什么不直接在Lisit.vue里面写@click.native="handleClick" 。原项目就是这样写的，其中的部分逻辑我简化了，最重要的是这个不是我们讨论的重点。

根据上面的代码我们只要在绿色的方框内点击，均可以实现请求文章内容。实测也是没有问题的，但是上线以来，有部分用户报障“文章列表点不动(其实就是onClick -> handleClick没有调用”，作为开始说实话一开始是不信，这么简单的逻辑，这时vue的常规操作好吗，怎么可能有问题。

但是经过远程和实地确认，确实是有这样的问题。

经过调查发现，当点击上图红色圆圈下方时，是可以触发onClick的。其实此时是刚好直接点到绿方框这个元素了，也就是说我们直接点到绑定了点击事件的div上时是可以触发onClick。我们的第一反应是这

的子元素是否使用了阻止冒泡，可惜没有，如果有，开发自测和测试人员测试早就会发现，该问题不可能到线上才被发现。

我们有怀疑是除了click以外其他事件的影响，比如mousedown、mouseup被阻止冒泡，是否存在使用事件捕获并且还阻止冒泡的情况，经过排除后，发现是有一部分的，按照宁愿错杀不能漏杀的原则，我们针对这些事件都进行调整，但是是否真的解决了这个问题，我们不知道，因为这个问题我们开发人员本地、测试人员在测试环境和生产环境均无法复现。每次只能在发版的时候带上去一点点改动，改动的前提是不保证能改好，但是一定不会改坏，面对客户的报障我们只能叫他们用临时的解决方案，也是点击红色圆圈下面那块区域。

有一次我们增加了在红色圆圈和红色方框上绑定同一个事件，也就是

// ListItem.vue

是的，我们就差在

和

也绑上点击事件了。我们太难了。。。

这样上线后依然有问题，大家应该料到了，如果那些用户点到了

和

上依然是无法触发onClick的，作为一个程序员，我们绝不容忍在每个div上绑定同样的事件啊，我们放弃了这样的改动，做个有尊严的程序员，不是吗？

在用户发生“点不动”的时候，我们实体去看的时候发现：

1.我们在调试工具里面将所有的dom上绑定的事件都移除，只保留自己绑定的
这一个事件，用户依然“点不动”，依然只有点击红圈才能触发onClick。
2.我们在控制台使用document.querySelect('.yellow .square1').click()的方式是可以触发onClick的，也就是该点击事件其实是可以冒泡到
的。

为什么我们用鼠标点击就不行了，并且通过在控制打印出我们点击的元素，我们可以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了。
在上面列表的

上绑定事件，然后根据对应的文章id来实现打开对应文章的目的，这一部分没什么技术含量，就不细说了。

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

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

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

关于“Vue在chrome44偶现点击子元素事件无法冒泡怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。

当前标题：Vue在chrome44偶现点击子元素事件无法冒泡怎么解决
文章分享：http://dzwzjz.com/article/jidoso.html

其他资讯

大橙子网站建设，新征程启航

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

其他资讯