調試手記：iOS Safari 瀏覽器觸摸事件 targetTouches 屬性被瀏覽器重用

問題描述

將第三方觸控庫刪掉使用原生事件後發現一個 bug，具體表現爲在 iOS Safari 中 touch 響應失效。

調試結果

使用 Chrome 驗證功能正常，打 log 發現業務代碼中緩存了 targetTouches 屬性，可是下一次 touchmove 事件到來時緩存的 targetTouches 被改變了，clientX 和 clientY 變爲新值，致使沒法正確計算手指滑動距離。經研究發現，Safari 在屢次發出 touch 事件期間，重用了 event.targetTouches 這個 touchList 對象和裏面 Touch 對象，致使緩存被改動，沒法正確記錄歷史數據。

修正方案

不緩存 targetTouches 屬性，而是將關心的數據複製下來，演示代碼以下：

this.lastTouches_ = map(evt.targetTouches, function(el) {
    return {
        clientX: el.clientX,
        clientY: el.clientY,
    };
});