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

big_cat 发布于2019-08-20 11:33 / 601人阅读

摘要：问题描述将第三方触控库删掉使用原生事件后发现一个，具体表现为在中响应失效。经研究发现，在多次发出事件期间，重用了这个对象和里面对象，导致缓存被改动，无法正确记录历史数据。

问题描述

将第三方触控库删掉使用原生事件后发现一个 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,
    };
});

GPU云服务器云服务器多点触摸ie浏览器 safari扩展浏览器 php 调试浏览器谷歌浏览器调试webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80630.html

移动端 Touch 事件的使用与思考（1）

摘要：在中与值是相等的，在微信中两个数值不等，但单位应该也不一样。测试过程中及微信内置浏览器都不支持这些属性，模拟器可以。也是一个对象，对于事件这个对象列出在此次事件中新增加的触点。本文主要介绍 TouchEvent 相关的一些对象与属性如 Touch, TouchList, touhces, targetTouches 等，以及使用的注意点和误区。触摸事件有以下几种类型：touchst...

elva 2019-08-19 18:26 评论0 收藏0
移动前端知识总结

摘要：基础知识页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对的版本以后，上已看不到效果将网站添加到主屏幕快 meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快...

gotham 2019-08-29 11:08 评论0 收藏0
移动前端知识总结

摘要：基础知识页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对的版本以后，上已看不到效果将网站添加到主屏幕快 meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快...

MartinDai 2019-08-01 15:36 评论0 收藏0