调试手记:iOS Safari 浏览器触摸事件 targetTouches 属性被浏览器重用

问题描述

将第三方触控库删掉使用原生事件后发现一个 bug,具体表现为在 iOS Safari 中 touch 响应失效。缓存

调试结果

使用 Chrome 验证功能正常,打 log 发现业务代码中缓存了 targetTouches 属性,可是下一次 touchmove 事件到来时缓存的 targetTouches 被改变了,clientX 和 clientY 变为新值,致使没法正确计算手指滑动距离。经研究发现,Safari 在屡次发出 touch 事件期间,重用了 event.targetTouches 这个 touchList 对象和里面 Touch 对象,致使缓存被改动,没法正确记录历史数据。this

修正方案

不缓存 targetTouches 属性,而是将关心的数据复制下来,演示代码以下:调试

this.lastTouches_ = map(evt.targetTouches, function(el) {
    return {
        clientX: el.clientX,
        clientY: el.clientY,
    };
});
相关文章
相关标签/搜索