以下为开发希望英语游戏的时候遇到的各种问题。
##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；
＃背景图加载失败