項(xiàng)目中遇到的奇怪問(wèn)題，已定位原因。Attempted to assign to readonly property報(bào)錯(cuò)

起因：項(xiàng)目中寫(xiě)了個(gè)點(diǎn)擊事件，增加動(dòng)態(tài)效果，類(lèi)似于轉(zhuǎn)一轉(zhuǎn)，rotate(360)。很簡(jiǎn)單的一個(gè)特效。
設(shè)置元素的transition:transform 1s。 然后動(dòng)態(tài)改變?cè)氐膖ransfrom:rotate的角度。一切看起來(lái)沒(méi)問(wèn)題。本地測(cè)試，真機(jī)測(cè)試都OK。但是提測(cè)后，在測(cè)試的IOS10下的safari，竟然沒(méi)有生效。

定位原因： 一開(kāi)始以為是transform沒(méi)有加上前綴。但確認(rèn)后排除。于是真機(jī)連接代理測(cè)試，在點(diǎn)擊事件中alert彈窗，發(fā)現(xiàn)并沒(méi)有執(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'。
（沒(méi)有驗(yàn)證，因?yàn)橛X(jué)得不可行，因小失大）

解決方案。 猜測(cè)是因?yàn)镾tyle不可以直接change,但應(yīng)該可以設(shè)置Style.transform。測(cè)試可行，但這樣設(shè)置多個(gè)屬性的時(shí)候，并不優(yōu)雅，可換成class。 不過(guò)因?yàn)閞otate角度涉及到計(jì)算，故而本人并沒(méi)有采用設(shè)置class的方案。

錯(cuò)誤:  dom.style = `transform: rotate(${x}deg)`;

正確   dom.style.transfrom = 'rotate(${x}deg)';

PS：解決iOS10的Safari下Meta設(shè)置user-scalable=no無(wú)效的方法

蘋(píng)果為了提高Safari中網(wǎng)站的輔助功能，屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面，就算加上user-scalable=no，Safari瀏覽器也能支持手動(dòng)縮放。

我們可以用js加監(jiān)聽(tīng)事件來(lái)阻止手動(dòng)縮放。

代碼如下：

  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) 
  }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論