Vue在chrome44偶現(xiàn)點擊子元素事件無法冒泡的解決方法

更新時間：2019年12月15日 10:40:56 作者：普若木特

這篇文章主要給大家介紹了關于Vue在chrome44偶現(xiàn)點擊子元素事件無法冒泡的解決方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

前言

公司的一個項目大致是這樣的：一個左側列表，點擊左側列表的文章標題，右側展開該文章對應的內(nèi)容的。
現(xiàn)在的問題出現(xiàn)在極少部分客戶有時左側的標題，無法打開對應的右側的內(nèi)容，給人的改進就是‘卡'、點不動、點了沒反應。

再大致介紹下項目環(huán)境：

chrome 44(打包到用戶客戶端內(nèi))
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() {
    ... 請求文章內(nèi)容相應的邏輯
   }
  }
 }
</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" 。原項目就是這樣寫的，其中的部分邏輯我簡化了，最重要的是這個不是我們討論的重點。

根據(jù)上面的代碼我們只要在綠色的方框內(nèi)點擊，均可以實現(xiàn)請求文章內(nèi)容。實測也是沒有問題的，但是上線以來，有部分用戶報障“文章列表點不動(其實就是onClick -> handleClick沒有調(diào)用”，作為開始說實話一開始是不信，這么簡單的邏輯，這時vue的常規(guī)操作好嗎，怎么可能有問題。

但是經(jīng)過遠程和實地確認，確實是有這樣的問題。

經(jīng)過調(diào)查發(fā)現(xiàn)，當點擊上圖紅色圓圈下方時，是可以觸發(fā)onClick的。其實此時是剛好直接點到綠方框這個元素了，也就是說我們直接點到綁定了點擊事件的div上時是可以觸發(fā)onClick。我們的第一反應是這<div class="green">的子元素是否使用了阻止冒泡，可惜沒有，如果有，開發(fā)自測和測試人員測試早就會發(fā)現(xiàn)，該問題不可能到線上才被發(fā)現(xiàn)。

我們有懷疑是除了click以外其他事件的影響，比如mousedown、mouseup被阻止冒泡，是否存在使用事件捕獲并且還阻止冒泡的情況，經(jīng)過排除后，發(fā)現(xiàn)是有一部分的，按照寧愿錯殺不能漏殺的原則，我們針對這些事件都進行調(diào)整，但是是否真的解決了這個問題，我們不知道，因為這個問題我們開發(fā)人員本地、測試人員在測試環(huán)境和生產(chǎn)環(huán)境均無法復現(xiàn)。每次只能在發(fā)版的時候帶上去一點點改動，改動的前提是不保證能改好，但是一定不會改壞，面對客戶的報障我們只能叫他們用臨時的解決方案，也是點擊紅色圓圈下面那塊區(qū)域。

有一次我們增加了在紅色圓圈和紅色方框上綁定同一個事件，也就是

<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">上依然是無法觸發(fā)onClick的，作為一個程序員，我們絕不容忍在每個div上綁定同樣的事件啊，我們放棄了這樣的改動，做個有尊嚴的程序員，不是嗎？

在用戶發(fā)生“點不動”的時候，我們實體去看的時候發(fā)現(xiàn)：

1.我們在調(diào)試工具里面將所有的dom上綁定的事件都移除，只保留自己綁定的<div class="green" @click="onClick">這一個事件，用戶依然“點不動”，依然只有點擊紅圈才能觸發(fā)onClick。
2.我們在控制臺使用document.querySelect('.yellow .square1').click()的方式是可以觸發(fā)onClick的，也就是該點擊事件其實是可以冒泡到<div class="green">的。

為什么我們用鼠標點擊就不行了，并且通過在控制打印出我們點擊的元素，我們可以100%確定我們用鼠標點擊的就是document.querySelect('.yellow .square1')所對應的這個元素。

這個發(fā)現(xiàn)完全顛覆了我們的認知。到底是哪里錯了，要么是Vue，要么是瀏覽器，都是大佬啊，它們錯了？其他人都在用，都沒毛病啊，并且這個問題無法復現(xiàn)，沒有必現(xiàn)流程，使用按鍵精靈模擬用戶操作了一天也沒有復現(xiàn)。怎么跟其他人，大家只會覺得你連這么簡單的問題都搞不定？代碼也給很多前端同事、前端大佬review過了，沒毛病啊。但是生產(chǎn)上就是有人使用時會出現(xiàn)“點不動”，這是事實啊。

瀏覽器是前端的根基，我們我只能開始大膽懷疑下是Vue的問題，或者我們的用法有問題(怎么用沒有問題)，或者說這個版本的Vue在這個版本的Chrome44在部分場景中有問題。

搜了vue event propagation相關的內(nèi)容，有一點小小的發(fā)現(xiàn)，之前確實有人反映過Vue 2.4.2在子元素事件冒泡相關的issue，并且vue的源碼里面也有相關的注釋。