Hybrid_APP_Notes

以下为开发希望英语游戏的时候遇到的各种问题。

##IOS下click不正常冒泡

理论上click事件触发后会一直冒泡到document。但IOS上情况不一样。

在IOS上，click事件通常只会冒泡到body以下的节点；也就是说，不会触发body和document的click事件，把handler绑到这两者上面是没有用的。

只有在下列三种情况，click事件才会冒泡到body和document：

目标元素是表单元素或者a
目标元素或者其父辈元素（不包括body）上被直接绑定了handler，例如直接的onclick=''或者直接注册了鼠标相关的事件，即使该响应事件为空函数都可以。
目标元素或者其父辈元素(body, document都可以)上被设置了cursor:pointer;这一CSS属性值

参见ppk的Mouse event bubbling in iOS

##Ghost Click Ghost clicks in mobile browsers

###概述

移动设备上的浏览器会在第一次点击后等待片刻，确认没有第二次点击发生之后再触发click事件：

碰触屏幕 touchstart 触发
离开屏幕 touchend 触发
浏览器等待300ms确认没有另一次点击；没有的话，触发click

即使你对touch事件做了包装，如果这个过程中没有阻止默认事件，click事件就还是会发生；可能会点在链接上，或者触发其他click处理。由于click事件是根据touch事件发生的坐标来在对应的DOM元素上触发，也就是说，在这300ms的延迟里，如果DOM发生了变化，那么click事件便会在同一坐标位置的新元素上进行触发。

###解决方案

直接在touchstart上调用preventDefault()：
- 完全杜绝
- 但这页面就不能拖动了
在touchend上调用preventDefault()
- 没多少浏览器支持

这次的解决方案是每次切换时覆盖了一层div，直接阻绝了click；但是不知道为何，时间必须是在400ms后撤掉。

##cssmin对background做的压缩 grunt团队的css压缩插件grunt-contrib-cssmin基于clean-css; clean-css在遇到下列css的时候，

background: #fff url(background.jpg) left top no-repeat;
background-size: 100px 50px;

会将其压缩为

background: #fff url(background.jpg) left top/100px 50px no-repeat;

这实际上是CSS3里的background缩写方法，参见css3-background/#the-background-size；

Caniuse上说的是IOS6不支持CSS3的background缩写方法；而Android情况似乎更惨，测试的话是基本全军覆没，要到4.4才支持的样子。

该bug会导致使用压缩后的css的页面在IOS6和安卓机上背景设置了background-size全部挂掉。

##性能差的机子渲染挂掉主要表现为虽然加载了CSS，但是页面显示如同CSS挂掉了一样；但如果对页面进行放大，例如浏览器全屏，渲染便立即正常。推测应该是因为在渲染到一半的时候挂掉了。。解决方法就是强制浏览器重绘。

var parent = $sharePanel.parent();
parent.css({
    '-webkit-transform' : 'rotateZ(0deg)'
});
parent.height();
parent.css({
    '-webkit-transform' : 'none'
});

参考 https://gist.github.com/madrobby/1362093

##Bind方法的兼容性问题原来是觉得的手机端肯定都是ES5. 但事实证明，Android 2.3.* 的机子是可能出现不支持Function.prototype.bind的情况的。

##Tips

Touch类别的事件最好做一下封装
safari可以接电脑上开Safari dev
iOS safari开启隐私模式的时候无法使用桌面Safari进行debug；
让运营把信息流发布置顶：果然可以加速开发debug啊
一定要考虑缓存的问题！
使用seajs会有很严重的缓存问题，可以试着修改下seajs，给每个js添加时间戳
测试的时候可以让页面重定向到本地测试服务

＃一次点击会触发多次事件经查证应该是因为各模块事件绑定的不对，有的绑定了touchstart 有的绑定了touchend 还有的绑定了click；此外，场景的加载也不对，应该是先销毁再加载，但由于事件堆栈的实现，实际上试先销毁再加载的；

＃词典内UIWebView无法触发touchstart事件

ios6 ios7 的词典内部uiwebview都无法触发touchstart事件；

实际上是iphone内置词典的UA zepto无法判断出是移动端，事件被修改成了click 事件；此外，在debug的时候，发现前两层js不会缓存，但到了第三层的时候缓存很严重

＃桌面调试safari iOS safari开启隐私模式的时候无法使用桌面Safari进行debug；

＃背景图加载失败

chengmu/hybrid_app_notes.md