苟慧云,警犬巴打国语版,独立日:卷土重来
项目中遇到的奇怪问题，已定位原因。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)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论