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

时间：2022-12-20 19:36:37

在项目的开发中难免遇到各种各样的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

前端bug记录---不定时更新的更多相关文章

  1. iOS 属性修饰符记录 --不定时更新

    重新审视了一下OC在属性修饰符,特意记录一下来.以后不定时更新 > retain:只有在非ARC下才会有效,所有如果在ARC下使用了retain修饰也白搭 如以下的data属性用retain修饰 ...

  2. 前端bug记录

    记录一下前端入门时期遇到的一些bug. 1.同步.异步问题 背景:Javascript语言的执行环境是单线程.即一次只能完成一个任务.若有多个任务则需排队逐个执行——前一个任务完成,再执行后一个任务. ...

  3. 微信开发中，不同手机系统遇到的bug（不定时更新）

    Ios系统 1.body上绑定click事件失效. 解决:body标签下面,用个div,当做包裹所有内容的大容器.给这个div,绑定click事件. 2.不支持 YYYY-MM-DD 的时间格式. 用 ...

  4. 【SQL 代码】SQL 语句记录&lpar;不定时更新&rpar;

    1.数值四舍五入,小数点后保留2位 round() 函数是四舍五入用,第一个参数是我们要被操作的数据,第二个参数是设置我们四舍五入之后小数点后显示几位. numeric 函数的2个参数,第一个表示数据 ...

  5. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don&&num;39&semi;t know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  6. linux下svn定时更新项目

    方法一.用shell脚本定时更新项目   1.进入网站的根目录,假设项目位置放在/var/www/test cd /var/www/test   2.建立脚本文件update.sh,分两步进行.首先利 ...

  7. PHP 日常开发过程中的bug集合（持续更新中。。。）

    PHP 日常开发过程中的bug集合(持续更新中...) 在日常php开发过程中,会遇到一些意想不到的bug,所以想着把这些bug记录下来,以免再犯! 1.字符串 '0.00'.'0.0'.'0'  是 ...

  8. 红米3 Flyme5&period;1&period;9&period;5插桩适配长期不定时更新

    ROM介绍: 2016.9.5更新日志: 1,更新源码到0905 2.修复bug若干. 2016.8.29更新日志: 1,更新源码到0829 2.修复bug若干. 2016.8.22更新日志: 1,更 ...

  9. ASP&period;NET中设置一个定时器来定时更新 转

    asp.net 定时器 比较少用,  中国红木网这是一个相当实用的功能,有了RSS博客镜像,就不需要在多处同时发布博客日志了.比如你同时在新浪上有自己的博客,又同时有自己的个人博客站点,那么你只需要在 ...

随机推荐

  1. &lbrack;poj2182&rsqb; Lost Cows &lpar;线段树&rpar;

    线段树 Description N (2 <= N <= 8,000) cows have unique brands in the range 1..N. In a spectacula ...

  2. 给你的博客加上&OpenCurlyDoubleQuote;Fork me on Github”彩带

    起 如今,随着Git的大热以及Github的优越性,许多知名开源项目都将源代码托管到Github上了.在Github上不仅可以托管自己的开源项目,还可以Fork人家的源代码,给自己感兴趣的项目评价(s ...

  3. R语言归一化处理

    归一化化就是要把你需要处理的数据经过处理后(通过某种算法)限制在你需要的一定范围内.首先归一化是为了后面数据处理的方便,其次是保正程序运行时收敛加快. R语言中的归一化函数:scale 数据归一化包括 ...

  4. PHP 杂项 函数

    安装 杂项函数是 PHP 核心的组成部分.无需安装即可使用这些函数. Runtime 配置 杂项函数的行为受 php.ini 文件中的设置的影响. 杂项配置选项: 名称 默认 描述 可更改 ignor ...

  5. Innobackupex 全备数据库

    对于MySQL数据库的热备.xtrabackup是除了MySQL enterprise backup之外的不二之选. 该工具提供了基于innodb存储引擎的热备.支持全量,增量备份,部分备份,时点恢复 ...

  6. jquery Deferred使用经验

    这周做了个小活动(http://aoqi.100bt.com/zt-2016duanzi/index.html),刚开始时候没看好需求,逻辑都写一块了 最后各种坑要填补,从中也获取了些经验和教训,下面 ...

  7. 如何使用Android中的OpenGL ES媒体效果

    引自:http://www.2cto.com/kf/201506/404366.html Android的媒体效果框架允许开发者可以很容易的应用多种令人印象深刻的视觉效果到照片或视频之上.作为这个媒体 ...

  8. XML之XPath操作

    在学习XPath之前你应该对XML的节点,元素,属性,原子值(文本),处理指令,注释,根节点(文档节点),命名空间以及对节点间的关系如:父(Parent),子(Children),兄弟(Sibling ...

  9. PyQt4 的部件 -- CheckBox 单选框

    单选框具有两种状态:被选中或未被选中. 当用户选择或者取消选择时,单选框就会发射一个stateChanged()信号 # QCheckBox 单选框 # 本例创建一个用来改变窗口标题的单选框 impo ...

  10. requests之一：HTTP OAUTH认证（1）图形解释流程

相关文章