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

// 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>

<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彻底用成了我们讨厌的样子。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。