Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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事件:

  1. 碰触屏幕 touchstart 触发
  2. 离开屏幕 touchend 触发
  3. 浏览器等待300ms确认没有另一次点击;没有的话,触发click

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

###解决方案

  1. 直接在touchstart上调用preventDefault():

    • 完全杜绝
    • 但这页面就不能拖动了
  2. 在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;

#背景图加载失败

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.