当前位置 主页 > 服务器问题 > win服务器问题汇总 >

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

    栏目:win服务器问题汇总 时间:2019-12-15 21:06

    前言

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

    再大致介绍下项目环境:

    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="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>