您好,登錄后才能下訂單哦!
項(xiàng)目中遇到的奇怪問題,已定位原因。Attempted to assign to readonly property報(bào)錯(cuò)
起因:項(xiàng)目中寫了個(gè)點(diǎn)擊事件,增加動態(tài)效果,類似于轉(zhuǎn)一轉(zhuǎn),rotate(360)。很簡單的一個(gè)特效。
設(shè)置元素的transition:transform 1s。 然后動態(tài)改變元素的transfrom:rotate的角度。一切看起來沒問題。本地測試,真機(jī)測試都OK。但是提測后,在測試的IOS10下的safari,竟然沒有生效。
定位原因: 一開始以為是transform沒有加上前綴。但確認(rèn)后排除。于是真機(jī)連接代理測試,在點(diǎn)擊事件中alert彈窗,發(fā)現(xiàn)并沒有執(zhí)行。于是確認(rèn)有報(bào)錯(cuò)。try catch后彈出錯(cuò)誤。
Attempted to assign to readonly property
查閱資料得知,是safari內(nèi)核bug。網(wǎng)上有解決方案,不要使用嚴(yán)格模式,即刪除'use strict'。
(沒有驗(yàn)證,因?yàn)橛X得不可行,因小失大)
解決方案。 猜測是因?yàn)镾tyle不可以直接change,但應(yīng)該可以設(shè)置Style.transform。測試可行,但這樣設(shè)置多個(gè)屬性的時(shí)候,并不優(yōu)雅,可換成class。 不過因?yàn)閞otate角度涉及到計(jì)算,故而本人并沒有采用設(shè)置class的方案。
錯(cuò)誤: dom.style = `transform: rotate(${x}deg)`;
正確 dom.style.transfrom = 'rotate(${x}deg)';
PS:解決iOS10的Safari下Meta設(shè)置user-scalable=no無效的方法
蘋果為了提高Safari中網(wǎng)站的輔助功能,屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面,就算加上user-scalable=no,Safari瀏覽器也能支持手動縮放。
我們可以用js加監(jiān)聽事件來阻止手動縮放。
代碼如下:
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) }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。