這是一個悲傷的故事，某日清晨，距離版本轉測還剩一天，切圖仔的我正按照計劃有條不紊的畫頁面，當我點擊一個下拉彈框組件中分頁組件頁數過多而出現的向后 5 頁省略號時，悲劇開始了，彈框被識訓了，情景再現
問題
問題的表象很簡單，使用的是組件庫的下拉彈窗組件，在組件中使用到了分頁組件，當點擊分頁組件的向后 5 頁快速跳轉時，彈窗被識訓了，我們的預期是能夠繼續操作的，只有點擊彈框外部時，彈窗才會被識訓，
分析
發現這個問題我做了如下分析：
-
確定這是一個問題
再次重復操作問題，確定問題出現的條件，能夠在特定條件下復現的問題才是問題，我穩定的復現了問題條件是：分頁組件出現向前跳轉 5 頁或向后跳轉 5 頁，點擊到不會再出現向前跳轉 5 頁或向后跳轉 5 頁這樣的快速跳轉后，彈框會被識訓， -
確定是自己組件配置使用問題還是組件本身 bug
我在組件的檔案中并沒有看到有關這個問題的特別說明，接著我又在官方提供的代碼運行環境中，寫了一個使用的 demo（實際專案中的代碼復雜度較高，可能存在被其他樣式等因素影響而產生問題，使用功能單一的 demo 有助于我們快速確定問題范圍，且官方運行環境一般使用的是其最新的組件版本），發現與我在專案中使用存在同樣問題，到這里可以排除是組件配置使用，組件庫版本不是最新，及專案環境影響導致的問題， -
在組件庫的開源專案中查詢 issue
在 issue 中搜索關鍵字查詢是否有相關 issue，如果運氣好找到相關問題，一般會有相關的討論，就算沒有具體的解決措施也能讓你明白問題大概在哪里，我運氣比較差，沒有找到相關問題的 issue，所以只能自己提一個 issue 了，有時間有耐心等待維護人解決你提的 issue，問題分析到這里就可以結束了， -
查看組件原始碼
顯然我的時間很緊急，問題必須盡快解決，且我也想確定一下問題具體在哪里，看自己能否解決，很快我找到的相關組件的原始碼，經過定位發現，彈框下拉組件中使用了 v-click-outside 指令，用來觸發點擊指令之外的元素收起彈框，
進一步深入原始碼，發現 v-click-outside 組件的原理，是在 document 組件上注冊了一個 click 監聽事件，當有點擊事件發生，監聽函式會判斷，點擊事件發生的元素，是否包含在使用指令的元素中，如果是監聽函式回傳，否則觸發指令系結的事件（在彈框組件中就是隱藏彈框），代碼片段如下
// el 表示指令系結的元素，event為點擊事件
const isClickOutside = event.target !== el && !el.contains(event.target)
if (!isClickOutside) {
return
}
if (middleware(event, el)) {
handler(event, el)
}
- 斷點除錯
經過上面的步驟過后，我還沒有發現問題的所在，所以只能打斷點進行代碼除錯了，經過除錯發現問題出在 el.contains(event.target) 這一段，分頁組件中的向前 5 頁元素，點擊觸發后就被 v-if 指令從頁面中移除了，所以運行到這一句時，el 中是不包含向前 5 頁元素的，也就是說這里向前 5 頁元素被錯誤的判斷為不在 el 元素中，指令系結的彈框收起函式被觸發，彈框被識訓了，
解決問題
問題已經找出，現在問題是怎么解決，因為問題是出在組件中，但是我們又不能直接修改組件庫代碼，直接修改專案依賴代碼，不利于代碼維護，也治標不治本，最好是能在專案代碼中添加代碼解決這個問題，
開始時走了一些彎路，想著用偽元素去覆寫，被點擊的元素，試圖去混淆 e.target，讓 el.contains(event.target) 為true，這樣確實取得了一些成效，但是在頁數更多了以后依然有問題，而且我也不是很清楚這樣用偽元素遮擋可以讓事件觸發元素不是本來元素的原理是什么，更重要的一點是，寫這篇文章的時候我完全回憶不出當時我為什么會想到這個方案，可能是靈感吧，解決問題真的很需要靈感，
在使用了彎路解決辦法暫時解決問題后，我開始思考更徹底的解決方案，歸根結底問題是出在了 v-click-outside 指令上，如果我夠找到一種正確的判斷方式，讓被洗掉的元素也可以被判斷為在指令注冊元素中，那么問題將得到徹底解決，經過不斷的嘗試與思考，我發現將點擊事件注冊在捕獲階段觸發時，得到的指令系結元素中依然有應該被洗掉的點擊元素，到這里問題基本就明朗了，徹底的解決方案也就出現了，
由于組件引入的 v-click-outside 指令是區域注冊在下拉彈框組件上的，所以我使用了 vue 的extends 繼承了組件的彈框下拉組件，在繼承的組件中重新注冊了指令 v-click-outside，該指令注冊在 document 上的點擊事件是捕獲階段觸發的，
由于是繼承覆寫組件庫中的組件，所以組件庫升級不會帶來太大的影響，同時也不用重新寫一個組件，減少了作業量，到這里問題就得到了徹底的解決，
輸出 v-click-out 包
解決完問題之后，我在 npm 上搜索了一些 click-outside 相關的包，發現這些包中注冊在 document 上的點擊事件，普遍是在冒泡階段觸發的，也就是說都存在文中我所遇到的問題，于是經過幾天業余時間的努力，我開源了一個基于 vue 的 click-outside 指令開源專案catch-click-outside（不要臉求star）
一點思考
在之前的作業中，我也解決了不少問題，這次之所以會記錄解決程序，一個是因為這個問題我產生了一些輸出，可能對別人會有些微的幫助，另一個比較重要的原因是，在解決問題程序中走了一些彎路，也遇到了一些坎，但是這些問題都在不停的思考與事件中逐漸清晰，然后被解決，我覺得這個程序很值得記錄，文字功底有限，這個解決程序記錄的平淡無奇，謹以此作為備忘，
轉載請注明出處！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/176007.html
標籤：JavaScript
上一篇：JavaScript的歷史
下一篇：Vue中錯誤圖片的處理