调试手记: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,
    };
});
    原文作者:Y3G
    原文地址: https://segmentfault.com/a/1190000007106790
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞