国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

我是如何通過debug成功甩鍋瀏覽器的:解決fixed定位元素,在頁面滾動后touch事件失效問題

tulayang / 2966人閱讀

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

如果你關注我應該知道,我最近對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過程中學到的知識總結一篇博客吧 :);

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115730.html

相關文章

  • 我是如何通過debug成功甩鍋覽器解決fixed定位元素頁面滾動touch事件失效問題

    摘要:二分析排查一步驟一使用搜索引擎我是在無意中發現該問題的,當時觀察到的現象是綁定在上的事件有時會被觸發,有時會失效。這說明并不存在偶爾失效的問題。也就是說,我需要找到確切的令響應事件失效的原因。接下來的事很簡單,繼續搜索事件在頁面滾動后失效。 如果你關注我應該知道,我最近對PC端頁面進行移動適配。在這個過程中,為了節省用戶300ms的時間,同時給予用戶更及時的點擊反饋(這意味著更好的用戶...

    JowayYoung 評論0 收藏0
  • H5項目常見問題匯總及解決方案

    摘要:解決方案可以解決在手機上點擊事件的延遲的模塊,事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏,同樣大小的屏幕上顯示的像素點由個變為多個,如在同樣帶下的屏幕上,蘋果設備的顯示屏中,像素點個變為個。 原文鏈接 - https://github.com/FrontEndRo... H5項目常見問題及注意事項 Meta基礎知識: H5頁面窗口自動調整到設備...

    marser 評論0 收藏0
  • H5項目常見問題及注意事項

    摘要:解決方案可以解決在手機上點擊事件的延遲的模塊,事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏,同樣大小的屏幕上顯示的像素點由個變為多個,如在同樣帶下的屏幕上,蘋果設備的顯示屏中,像素點個變為個。 Meta基礎知識: H5頁面窗口自動調整到設備寬度,并禁止用戶縮放頁面 //一、HTML頁面結構 // width 設置viewport寬度,為一...

    honhon 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<