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

big_cat 發布于2019-08-20 11:33 / 759人閱讀

摘要：問題描述將第三方觸控庫刪掉使用原生事件后發現一個，具體表現為在中響應失效。經研究發現，在多次發出事件期間，重用了這個對象和里面對象，導致緩存被改動，無法正確記錄歷史數據。

問題描述

將第三方觸控庫刪掉使用原生事件后發現一個 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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