调试手记：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,
    };
});