web app遇到的一些坑及小技能

問題：手機端 click 事件會有大約 300ms 的延遲
原因：手機端事件 touchstart --> touchmove --> touchend or touchcancel --> click，因為在touch事件觸發(fā)之后，瀏覽器要判斷用戶是否會做出雙擊屏幕的操作，所以會等待300ms來判斷，再做出是否觸發(fā)click事件的處理，所以就會有300ms的延遲

解決方法：使用touch事件來代替click事件，如 zepto.js 的tap事件和fastClick，還有我自己也寫了個移動端手勢操作庫 mTouch，都有相應的事件可以代替click事件解決這個問題

問題：在部分機型下（如小米4、小米2s、中興） body 設置的 font-size 是用 rem 單位的話，若其他元素沒有設置font-size，該font-size值繼承于body，則會很高概率出現(xiàn)字體異常變大的情況
原因：估計是跟app的webview默認設置有關，body的font-size使用rem單位，就是相對于 當前根節(jié)點的font-size來確定的，可能在某些webview的設置下，body用的是webview設置的默認字體大小，因為在我給html設置 了一個px單位的默認font-size時，還是會出現(xiàn)字體異常變大的情況，具體webview的一些細節(jié)就沒有再研究了
解決方法：body設置一個px單位的默認font-size值，不用rem，或者給字體會異常變大的元素設定一個px單位的font-size值
問題：使用zepto的 tap 事件時會出現(xiàn)“點透”bug，比如：一個元素A綁定了tap事件，緊跟其后的元素B綁定了click事件，A觸發(fā)tap事件時將自己remove掉，B就會自動“掉”到A的位置，接下來就是不正常的情況，因為這個時候B的click事件也觸發(fā)了
原因：因為tap事件是通過 touchstart 、touchmove 、 touchend 這三個事件來模擬實現(xiàn)的，在手機端事件機制中，觸發(fā)touch事件后會緊接著觸發(fā)touch事件坐標元素的click事件，因為B元素在300ms內(nèi)剛好 “掉”回來A的位置，所以就觸發(fā)了B的click事件，還有zepto的tap事件都是代理到body的，所以想通過 e.preventDefault()阻止默認行為也是不可行的
解決方法：（1）A元素換成click事件；（2）使用我寫的庫 mTouch 來給A綁定tap事件，然后在事件回調(diào)中通過e.preventDefault()來阻止默認行為，或者換用其他的支持tap事件的庫
            待續(xù)...
    一些有用技能點
            通過設置css屬性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手機端webkit瀏覽器 點擊按鈕或超鏈接之類的 默認灰色背景色
            設置css屬性 -webkit-user-select:none; 控制用戶不可選擇文字
            區(qū)域性 overflow: scroll | auto 滾動時使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）