在项目的开发中难免遇到各种各样的bug,我觉得还是有必要记录一下的,方便日后查询。
safari window resize
为满足日常轮播需求,做一个符合当前业务的轮播插件,其中需要考虑window变化的情况,所以绑定了resize事件用来做相应的处理。safari中scroll(上下滑动)操作会触发window的resize事件,暂且叫bug吧。
demo就不写了,你们顺便弄弄就好了,这里说下解决思路。
一般绑定window的resize事件,都是为了处理视窗的width的变化,那我们就可以先保存一个视窗的width,当resize触发时再跟当前的width进行对比,这样一来就能判断视窗的width是否变化了。
伪代码:
var oldWidth = window.innerWidth;window.onresize = function(){ if(oldWidth != window.innerWidth){ //do something } }
safari alert touch
在页面滑动的过程中,alert会堵塞事件 ,看测试demo
document.addEventListener("touchstart",function(e){
var p = document.createElement("p");
p.innerText = "start";
document.body.appendChild(p);
},false);
document.addEventListener("touchmove",function(e){
var p = document.createElement("p");
p.innerText = "move";
document.body.appendChild(p);
},false);
document.addEventListener("touchend",function(e){
var p = document.createElement("p");
p.innerText = "end";
document.body.appendChild(p);
alert("ok")
},false);
来来来,大家来猜猜一次完成的滑动操作,页面会输出什么?so easy嘛
start
move *n
弹出”ok“
end
大家心里活动:”博主还是太年轻啊,这么容易的问题都来提问“
好的,我开始也是这样以为的啊,但是在safari中的情况是这样的
在safari中,第一次只触发 start和end事件(只点击页面)的结果
start ---》alert ----》end 再出现 start (抓狂吗,继续看下面)这一次操作算完了
第二次,随便怎么触发(点击或者滑动)
alert---》end
对的,不管什么操作都只触发end ,alert导致end事件堵塞很明显了,至于这里为什么是end,我觉得是补发上一次(第一次alert堵塞)start未结束的end
解决思路
现在还没有什么好的解决办法,swiper也存在此问题
暂时只能通过改写alert方法,相当于禁止此方法。(如果大家有对这个问题深入研究的,麻烦解答一下)
先这样吧,其他的慢慢更新 -- 2016-08-19