那些年,我们踩过的“坑”

1. 使用try catch时,catch后面一定要跟上e,否则就会报错:

try {
alert(a);
} catch() {}//没有e会报错

2. Android下audio会自动被触发的bug,场景是当你在网页中使用了audio标签,当暂停后,这时如果有系统的声音被触发,这个audio的音频在某些设备上又会被“唤醒”播放。解决方法是播放结束后将src设为空页面(不是空字符串””):

$audio.on(‘ended’, function() {

$audio.attr(‘src’, ‘about:blank’);

});

3. Manifest更新问题,当有资源更改时我们知道需要修改manifest文件使其触发更新,但是即使是这样,也只是将缓存更新,页面还是使用之前老的资源,需要用户第二次进入才可以更新为最新的,解决方法是在更新完毕后刷新页面,同时注意Manifest文件不要设置缓存头,强制每次都取最新的:

window.applicationCache.addEventListener(‘updateready’, function(e) {

if(window.applicationCache.status === window.applicationCache.UPDATEREADY) window.reload();

});

4. Mobile上滚动事件处理,在Android2.3以下监听window的scroll事件时,只有在scroll结束后才会触发事件,而在浏览器中则是会实时触发,解决方法是使用touchmove事件来代替scroll事件。但是有时我们又需要这种scroll时只触发一次的事件,比如在手机上滚动结束后才触发某个事件,解决办法是使用定时器,保证只在最后触发一个事件处理,其余的则在滚动未结束时清除定时器,如在GMU中的处理方法:

function throttle() {
var timeId;
function wrapper() {
function exec() {};
timeId && clearTimeout(timeId);
timeId = setTimeout(exec, delay);
}
return wrapper;
})();
$(window).on(‘scroll’, throttle);

5. Zepto穿透bug,当两个层叠加在一起时,使用zepto的tap事件时点击上面一个层时有时会触发下面层的事件,俗称“穿透”,原因是由于zepto的tap事件是绑定在document上的,解决方法是延迟一定时间处理事件或是监听touchend事件并在事件中使用preventDefault阻止冒泡,还有人提出来是使用css的pointer events来避免,当然也有一个第三方的,实在还是不行的话就使用”click”代替“tap”有时也能解决此问题。。。

6. Android2.2以下不支持position:fixed,同时在需要支持position:fixed支持时需要设置一下 <meta name=”viewport” content=”width=device-width, user-scalable: no”>  ,这样在有些设备还是有问题,比如这个元素在CSS中被设置为position: absolute;后来你再用JS设置position: fixed时调整位置,再次修改位置时发现position:fixed无法设了,解决方法是CSS里默认就将其设置为position: fixed;同时不要给这个元素设置transition动画,不然有可能也会影响position:fixed的效果。



无觅相关文章插件,快速提升流量

admin

  1. Pingback: 那些年,我们踩过的“坑” | ued资源分享站