移动端H5页面遇到的问题总结 - 非梧不栖_H5之家

　　最近刚做完一个移动端的项目，产品之无敌，过程之艰辛，我就不多说了，记录下在这个项目中遇到的问题，以防万一，虽然这些可能都是已经被N多前辈解决掉了的问题，也放在这里，算是为自己漫漫前端路铺了一颗小石子儿吧，也在文末留下自己未能解决的疑问，希望看到的朋友能解惑。

　　都知道做移动端的开发，在电脑上调试好了的东西，放在手机里可能真的秒秒钟就炸了，我发誓绝对没想到炸的这么快。。。

　　1、IOS监听不到input框输入中文的keyup事件

　　这个小标题好像不太明确，大概就是，APP中有一个列表显示的页面，页面上有个搜索功能，使用keyup监听input框，每一次keyup都去检索一下缓存数据有没有符合的数据，然而、然鹅，IOS上并没有能在每一次keyup都去检索，经过各种查发现，IOS的输入法（不管是第三方还是自带）能检测到英文或者数字的keyup，检测不到中文的keyup，（至于标点那些，就没有深究了），在输入中文之后需要点击回退按键，才会开始搜索，我自己能想到的办法就是定时检测setInterval，我也只能想到这办法了，但是总觉得不太好，于是搜索到了这个办法（），把keyup事件换成“input”和“propertychange”事件。

　　oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：

　　oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

　　在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称，这样看来，oninput & onpropertychange 似乎是监听输入框值变化的最佳方案。

　　原来的代码：

　　$(".ui-searchbar-input input").keyup(function () {
　　　　////
　　});

　　修改后的代码：

　　$(".ui-searchbar-input input").bind("input", function () {

　　　　////

　　});

　　这样一改之后，IOS也能正常啦~~~~

　　2、使用touchstart、touchmove、touchend导致页面不能滑动

　　页面上有个水滴状的图片，要求水平拖动修改余额显示，自然而然想到的就是用touchstart、touchmove、touchend来搞定了，由于是初次使用，免不得会偷懒，从网上找了一些使用代码来缝缝补补，改成自己想要的效果，以下是初始代码，也就是导致页面不能滑动的罪魁祸首：

　　$("#img-balance").on("touchstart", function (e) {
　　　　var touches = e.touches[0];
　　　　oW = touches.clientX - $(this).offset().left;
　　　　oH = touches.clientY - $(this).offset().left;
　　　　$(document).on("touchmove", function (event) {
　　　　　　event.preventDefault();
　　　　}, false);
　　});
　　$("#img-balance").on("touchmove",function(e){
　　　　var touches = e.touches[0],
　　　　　　oLeft = touches.clientX - oW;
　　　　if (oLeft < 20) {
　　　　　　oLeft = 20;
　　　　} else if (oLeft > document.documentElement.clientWidth - 45) {
　　　　　　oLeft = document.documentElement.clientWidth - 45;
　　　　}

　　　　$(this).css("left", oLeft + "px");
　　　　mainModule.showBalance(0);
　　});
　　$("#img-balance").on("touchend",function(){
　　　　$(document).off("touchmove", function (event) {
　　　　event.preventDefault();
　　　　}, false);
　　});

　　以上代码能完成我想要的效果，在电脑上玩儿的好好的，结果放在手机上就跪了，原来可以上下滑动的页面，只要一滑动图片，页面就不能上下滑动了，再检查了一下代码，表示完全不清楚为什么要在touchstart和touchend里面绑touchmove事件，这可能也是拷别人代码的弊端吧，因为不知道原因，索性就把那两段代码给删了，结果页面莫名其妙的就满血复活了，以下是修改后的代码：

　　$("#img-balance").on("touchstart", function (e) {
　　　　var touches = e.touches[0];
　　　　oW = touches.clientX - $(this).offset().left;
　　});
　　$("#img-balance").on("touchmove",function(e){
　　　　var touches = e.touches[0],
　　　　　　oLeft = touches.clientX - oW;
　　　　if (oLeft < 2) {
　　　　　　oLeft = 2;
　　　　} else if (oLeft > document.documentElement.clientWidth - 35) {
　　　　　　oLeft = document.documentElement.clientWidth - 35;
　　}

　　$(this).css("left", oLeft + "px");
　　mainModule.showBalance(0);
　　});

　　因为删掉off代码之后touchend里面几乎没有东西了，索性就把touchend也删了，发现并不影响效果，就偷着乐了，后经查证发现，页面不能滑动，就是因为那个event.preventDefault()阻止了事件的默认行为（页面滑动？？？），所以，把它删掉就好了。

　　3、部分手机滑动不流畅

　　页面中的滑动刷新使用的是iscroll，郁闷的是我周边的所有人的手机滑起来都是顺畅的不要不要的，只有我的，完全划不动，卡得抓狂，鉴于只有我的手机有这个问题，所以我把它放在了项目的最后来解决，甚至抱着只有我一个覆盖率或许可以不修复这个问题的小侥幸，现在想想真是惭愧（主要是我旁边的大牛说，“你要知道有一个你，就有千千万万个你”，你赢了）。

　　在网上查的时候发现还真是有千千万万个我，发现很多人都遇到过这个问题，其中有我觉得可信度较高的知乎（https://www.zhihu.com/question/21938954）、CSDN（，）等，还有一些不知名网站，都给出评论说可行的解决方案，无外乎就是以下几种（多是知乎总结出来的）：

　　　　1） iScroll v5.1.3 momentum: true （我用的iscroll的版本没这么高，所以就没有试过这种方法，不知是否可行）

　　　　2）关闭probeType属性（传说是因为这个启用监听滚动状态的很耗性能，关闭这个属性滑动就会流畅很多）

　　　　3）给scroll元素增加css样式：-webkit-transform:translate3d(0,0,0);

　　以上3种方式，我试过后两种，项目中的iscroll初始化为：

　　　　　　_myScroll = new IScroll('#wrapper', {
　　　　　　　　probeType: 3,
　　　　　　　　mouseWheel: true,
　　　　　　　　click: true
　　　　　　});

　　wrapper中的DOM为：　