前端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的浮层内部需要滚动，但是不能影响到外面滚动

伪代码

<body style="height:2000">

<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