前端bug记录---不定时更新

在项目的开发中难免遇到各种各样的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方法，相当于禁止此方法。（如果大家有对这个问题深入研究的，麻烦解答一下）

android低版本touch事件

一个常见的需求，一个fiexd的浮层内部需要滚动，但是不能影响到外面滚动

伪代码

<div style="height:500px;overflow:auto">内部元素height为1000</div>

</body>

解决这个需求的思路1：滚动还是使用原生的滚动，判断上滑，下滑，在满足条件的情况下阻止touchmove的默认事件，代码如下

function touchControl(touchs){//一个现在滑动的方法，传入一个可滑动的元素

    //在某些设备上touchmove只能触发一次，因为在start和move的过程中触发了cancel，这个bug暂时没法解决。。

    touchs.eventsBind("touchstart",function(e){

        var ev = e || window.event,that = this;

        startY = ev.touches[0].clientY;

        ev.stopPropagation();

    });

    touchs.eventsBind("touchmove",function(e){

        var ev = e || window.event,that = this;

        ev.stopPropagation();

        moveY = ev.touches[0].clientY;

        /*document.querySelector(".rule").textContent = moveY;*/

        if(startY-moveY>0){

            if(that.scrollTop+that.offsetHeight>=that.scrollHeight-20){

                ev.preventDefault();

            }

        }

        if(startY-moveY<0){

            if(that.scrollTop<=20){

                ev.preventDefault();

            }

        }

    });

    /*touchs.eventsBind("touchcancel",function(e){

        var ev = e || window.event,that = this;

        ev.stopPropagation();

        ev.preventDefault();

    })*/

}

问题：在某些设备（主要是安卓）上touchmove只能触发一次，因为在start和move的过程中触发了cancel，这个bug暂时没法解决。。（要想touchmove触发，只能阻止掉默认事件，但是这样就不能使用原生滚动了）

解决思路2：阻止掉touch的默认事件，通过判断手势，滑动距离，使用position或者transform或者scrollTop来模拟滚动（这个已经有很多库实现了，我这边也实现了一个，原理很简单，就不献丑了）

先这样吧，其他的慢慢更新 -- 2017-06-20