溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目中遇到的奇怪問題，已定位原因。Attempted to assign to readonly property報錯
起因：項目中寫了個點擊事件，增加動態效果，類似于轉一轉，rotate(360)。很簡單的一個特效。
設置元素的transition:transform 1s。 然后動態改變元素的transfrom:rotate的角度。一切看起來沒問題。本地測試，真機測試都OK。但是提測后，在測試的IOS10下的safari，竟然沒有生效。
定位原因： 一開始以為是transform沒有加上前綴。但確認后排除。于是真機連接代理測試，在點擊事件中alert彈窗，發現并沒有執行。于是確認有報錯。try catch后彈出錯誤。
Attempted to assign to readonly property
查閱資料得知，是safari內核bug。網上有解決方案，不要使用嚴格模式，即刪除'use strict'。
（沒有驗證，因為覺得不可行，因小失大）
解決方案。 猜測是因為Style不可以直接change,但應該可以設置Style.transform。測試可行，但這樣設置多個屬性的時候，并不優雅，可換成class。 不過因為rotate角度涉及到計算，故而本人并沒有采用設置class的方案。
錯誤: dom.style = `transform: rotate(${x}deg)`;
正確 dom.style.transfrom = 'rotate(${x}deg)';
PS：解決iOS10的Safari下Meta設置user-scalable=no無效的方法
蘋果為了提高Safari中網站的輔助功能，屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面，就算加上user-scalable=no，Safari瀏覽器也能支持手動縮放。
我們可以用js加監聽事件來阻止手動縮放。
代碼如下：
window.onload=function () {
document.addEventListener('touchstart',function (event) {
if(event.touches.length>1){
event.preventDefault();
}
})
var lastTouchEnd=0;
document.addEventListener('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=300){
event.preventDefault();
}
lastTouchEnd=now;
},false)
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
