摘要：二分析排查一步驟一使用搜索引擎我是在無意中發現該問題的，當時觀察到的現象是綁定在上的事件有時會被觸發，有時會失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應事件失效的原因。接下來的事很簡單，繼續搜索事件在頁面滾動后失效。

如果你關注我應該知道，我最近對PC端頁面進行移動適配。在這個過程中，為了節省用戶300ms的時間，同時給予用戶更及時的點擊反饋（這意味著更好的用戶體驗），我在嘗試使用移動端獨有的 touchstart 事件替代傳統的 click 事件，這過程中我遇到了一些小問題，并成功解決了，你可以通過這篇文章查看具體的情況。

所謂禍不單行，在即將發布上線的時候，我又突然發現使用 touchstart 事件后，移動設備上出現了另一個比較詭異的現象：當用戶滾動頁面后，原本綁定在fixed定位的navbar元素上的 touchstart 事件會時常失效。你可以通過掃描下方二維碼，并使用你的Safari瀏覽器或Chrome瀏覽器（注意：不是瀏覽器自帶的模擬器）親自感受這一奇怪的現象。

當然，最終我成功解決了這個問題，并且有意思的是，這個問題似乎并不出自我的代碼，而被我歸咎于是瀏覽器的Bug。但是對于這個Bug出現的原理，我也只有一個大概的推測，如果你清楚的知道產生這一現象的原因，也歡迎你和我分享。

在本篇文章中，我不但會記錄我的解決方案，并且會記錄我在遇到這個問題后的debug的過程與分析思路。不過如果你正被這個問題搞得焦頭爛額，只想快點擺脫這個問題，你可以直接翻閱到文章底部“解決方案”部分，參考我的解決方案（我真是貼心，對吧？ ?）。

移動設備：iPhone 6

操作系統：iOS 11.2.5

測試瀏覽器：Safari，Chrome

點擊此處查看示例代碼

當在移動設備上使用測試瀏覽器打開網頁并滾動屏幕后，會發現再次點擊navbar，navbar元素綁定的 touchstart 事件并沒有被觸發（或偶爾不被觸發）。

我是在無意中發現該問題的，當時觀察到的現象是綁定在navbar上的 touchstart 事件有時會被觸發，有時會失效。于是我使用Google搜索了“touchstart 事件偶爾失效”的關鍵字，很遺憾，并沒有什么靠譜的答案。這說明“并不存在touchstart偶爾失效的問題”。也就是說，我需要找到確切的令 touchstart 響應事件失效的原因。

接下來，我不斷的在移動設備上嘗試各種操作（雙擊，滾動屏幕，放大等），并留心移動設備的響應，最終將 touchstart 綁定事件失效的原因確定為在“頁面滾動之后”。接下來的事很簡單，繼續Google搜索“touchstart 事件在頁面滾動后失效”。觀察首屏搜索結果，并點擊進去查看，遺憾的是，并沒有什么合適的信息：

接著我抱著試試看的態度切換百度搜索同樣的關鍵詞，還不錯，已經有了一個相似度很高的搜索結果，但是閱讀后發現依然不是我想要的：

是時候上最終的大殺器了，使用英文關鍵字搜索！以下是我使用了“touch event doesn"t respond after page scroll”關鍵字的Google搜索結果：

老樣子，還是沒有令人滿意的結果。至此我獲得了兩點信息：

可能是我的代碼寫的有問題：因為很小可能出現奇怪的現象從來沒有人遇到過；

我應該從 touch 事件的相關概念上找原因；

至此，debug的第一階段結束，我的徒勞無功表明了這個問題并不簡單，我需要認真對待，接下來我采用了以下兩種方法：

抽離核心代碼，通過隔離外界不確定因素，排除外因；

查閱MDN上touch事件的文檔，查找可能引發此類問題的內因；

思路很清晰對吧，但是我并沒有在相關文檔中找到可能引發此問題的任何靈感。不過好在我通過第一步已經讓問題變得非常清晰了，不要灰心，繼續思考。

基本上到了這個階段，debug的過程就進入到經驗和直覺領域了，要成功解決這個問題，你有時還需要一點點運氣，我在這個過程中嘗試了以下方案：

“無腦試對”：我將在搜索引擎中看到的一些問題的解決方法，逐個試驗，希望有個會管用，我可以獲得更多信息去定位問題出現的原因。這些嘗試有：為事件的回調函數添加 e.preventDefault() 方法，替換 touchstart 事件為 touchend 事件或者直接是 click 事件。

很尷尬，這些嘗試都沒有起到作用，問題依然存在，不過沒有關系，我本來也沒有對這個簡短的嘗試抱太大的期望，不過這其實也說明這個奇怪的現象和touch具體的事件類型無關，和touch事件誤觸發其余事件無關。

目前為止，我已經知道了 touch 事件我使用的方式是正確的，并且沒有其余的因素可以干擾點擊事件的觸發，自然而然的，我開始好奇，瀏覽器到底有沒有檢測到我手指的“點擊”。這可以通過以下代碼得到答案：

window.addEventListener("touchstart", e => {
    console.log(e.target)
})

奇妙的事情發生了，我的navbar居然不再出現頁面滾動后touch事件失效的問題！但是當我按照相同的思路，將代碼替換為下面的代碼想要看看返回值時：

var navbar = document.querySelector(".navbar")

navbar.addEventListener("touchstart", e => {
    console.log(e.target)
})

問題又出現了，并且當頁面滾動后，每當我再次點擊navbar，控制臺沒有任何輸出，這意味著瀏覽器認為我并沒有點擊navbar！

這不科學，但是我已然看到勝利的曙光。當我我將原先綁定在navbar上的 touchstart 事件通過事件的冒泡機制綁定在 window 對象，通過判斷 e.target 屬性進行事件回調時 -- 問題解決了，頁面正常了，整個世界都清凈了...

代碼如下：

var navbar = document.querySelector(".navbar")

window.addEventListener("touchstart", e => {
    if (e.target === navbar) {
        // callback
    }
})

掃描二維碼查看正確的效果：

到此為止問題被成功解決了嗎？并沒有。

雖然世界清凈了的那一刻令人神清氣爽，但是這只是需求被實現了，問題并沒有被解決，我指的是我心里的那個問題：“為什么這樣就行，而原來那樣就不行？”。這個問題至關重要，也希望你們不要忽略。

你同意嗎？那讓我們繼續。

讓我們再回過頭分析一下我們的代碼，很明顯它已經非常精簡了，唯一可能出問題的地方在于我們給navbar的 fixed 定位。我們再想想我們是怎么“誤打誤撞”解決這個問題的，navbar檢測不到我們的點擊，但是window可以，將這兩個線索放在一起思考，我得出了一個很值得懷疑的對象：層級。

我試著取消了navbar的 position: fixed; 聲明，果然，一切又都正常了?？磥磉@一奇異現象的始作俑者就是這條聲明。而我能想到與之相關的因素就是層級，我是指DOM對象的層級。

最終我是這樣解釋這個奇怪現象產生的原因：

在頁面初始化時，瀏覽器的DOM樹被正確的渲染，也就是說DOM元素間的關系正確，因此 navbar 元素可以準確的捕捉我們的 touchstart 事件，但是當頁面滾動后，瀏覽器丟失了 navbar 元素的層級關系， touchstart 事件無法通過冒泡被 navbar 元素捕捉，因此我們綁定的事件沒有響應。而當我們讓整個window對象監測 touchstart 事件后，瀏覽器可以重新正確的計算DOM對象間的關系，navbar 層可以捕捉到冒泡的事件，因此一切就都正常了。

這個解釋有說服你嗎？其實我心里也沒個底，畢竟這只是我基于現象的一種推測。但無論如何，這種奇怪現象的發生，應該被歸咎于瀏覽器，而不是我的代碼（哈，松了一口氣）。

到這里，這個問題就結束了嗎？并沒有。如果只是憑一個現象，一個推測就甩鍋瀏覽器，會不會讓人有一種欽定的感覺，讓某些人不服呢？會的，我自己心就比較虛，不過沒關系，只要掌握了以下的關鍵訣竅，甩鍋瀏覽器還不是分分鐘的事。

該訣竅就是 -- 你自己去多測幾個瀏覽器啊，朋友??！

我們根據引擎區分不同瀏覽器，

使用Webkit引擎的瀏覽器：Chrome，Safari

使用Gecko引擎的瀏覽器：Firefox

使用Presto引擎的瀏覽器：Opera

于是我下載了Firefox瀏覽器重新測試了原代碼下頁面效果，果然沒有問題！

呵呵，不是我代碼的問題。都是使用Webkit引擎的瀏覽器不好 ：）。

你以為本篇文章就這么結束了？并沒有（失望吧），實際上寫到這里，你應該也有所感覺，雖然這次debug成功解決了問題，但整個過程并不流暢高效，并且在其中走了些許彎路。結合本次debug的經驗，我總結了以下幾個在下次debug過程中需要注意的方面：

依次使用Google，Google（英文關鍵字），百度搜索引擎搜索問題關鍵字；

對沒有搜索到結果的問題保持警惕（檢查自己的代碼）；

編寫Demo，隔離核心代碼，簡化分析背景；

確保掌握相關技術知識點；

首先使用各瀏覽器測試（這樣便可以盡早排除是否是瀏覽器Bug）；

盡早使用 debugger 關鍵字而不是 console.log 方法進行調試；（沒錯，debugger 關鍵字讓調試更高效）；

仔細觀察問題，大膽假設，小心求證；

不要放棄，在解決需求后，要解決問題；

如果有時間精力的話，將發現的問題和debug過程中學到的知識總結一篇博客吧 ：）；

以上，是我在實際開發過程中發現問題，分析問題并解決問題的過程和思路，希望對你們有幫助。