最近在项目过程中，发现了部分Android手机的Webkit对scroll、touch事件响应存在一些问题。而针对这些棘手的问题，我们的交互方案又该如何应对？在这里将一些心得分享给大家。
场景
滚动加载。用户用触屏设备滚动一个列表页面，在滚动到页面底部时，通过异步请求动态加载数据，再滚再读，如此往复循环。而在实际的测试中，发现部分Android手机Webkit并没有正常响应事件。而用轨迹球滚动时却没有这个问题。
兼容性测试
对这个问题，我做了一个Demo并有针对性地观察事件响应的状况。Demo地址：http://www.smbey0nd.com/demo/lab/eventbug/demo.html
测试方法：用Android手机打开该页面，向上向下来回滚动，查看“时间触发记录”，看是否每次都有scroll的记录。
在Demo页面中，共监听了4个事件：onscroll、ontouchstart、ontouchmove、ontouchend。我动用了我所能拿到的所有设备进行测试，详情如下。
已测试设备：
- iPhone 3Gs (iOS 3.1.2)
- HTC Legend[G6] (Android 2.1update1)
- HTC Hero[G3] (Android 2.1update1)
- MOTO XT701 (Android 2.1update1)
- MOTO XT702[MileStone] (Android 2.1update1)
- Nexus One (Android 2.2)
- 索爱X10i (Android 1.6)
- HTC Magic[G2] (Android 1.6)
- ZTE R750 (Android 2.1update1)
出问题设备：
- HTC Hero[G3] (Android 2.1update1)
- HTC Legend[G6] (Android 2.1update1)
BUG描述：
预期结果是，当用手指触摸滚动页面时，scroll、touchstart、touchmove、touchend都会正常触发。而在用以上两台有问题的设备进行测试时，发现scroll和touchend两个事件并非100%触发，而是不规律的触发。有时在滚动数次之后，scroll和touchend会突然触发N次。有点像积攒了N久突然爆发一样。非常诡异。
而用轨迹球来滚动页面的话（两台问题设备均有轨迹球），则scroll事件没有问题，是完全100%触发的。
PS：欢迎参与测试！测试短链接：http://2.ly/cfqj 测试后请留下测试结果，附上 手机型号/系统版本/是否有轨迹球。多谢！
阅读全文 »
最近的Android项目中，用ontouch系列事件尝试做了一个ScrollLayer组件（基于jQuery），并做了一下封装。为了PC上观察效果，同时增加onmouse系列事件的支持。具体实现不多说了，大家可以直接查看代码：）
兼容性：
兼容iOS(Mobile Safari)/Android(Webkit)/PC(IE除外)，其它未考证
操作方法：
在所支持的Touch设备上，用手指按住图片区域，然后向右（或向下）华丽丽地一拖，随即松开手指。Yeah~
调用语法示例：
$('#J_Gallery').scrollLayer({
direction:'X', //方向。X代表水平方向，Y代表垂直方向
wrapEl:'.wrap', //外层容器。用来overflow遮罩的层
touchEl:'.holder', //touch层容器。用来包裹列表内层元素的层
childEl:'li', //内层元素。用来放图的层
margin:5, //间距。以实际元素间距为准
speed:0.95, //加速度。一般取0.9-1之间
prevent:true //阻止超链接默认事件
});
已知问题&待改进：
- 个别低配置Android设备上(HTC HERO G3)响应有些迟滞（性能问题？）。
- 暂没有开发图片自动对准功能。
更新：
- 感谢@Chappell提醒，修正onmouseup在拖放范围外释放的BUG（2010-7-19）
演示：http://www.smbey0nd.com/demo/lab/scrolllayer/demo.html
下载：http://www.smbey0nd.com/demo/lab/scrolllayer/ScrollLayer.rar
欢迎大家直接用iOS/Android设备访问短网址：http://2.ly/b9jb 进行测试，如果发现任何问题，请直接留言给我！多谢
ref:
拥有iPhone的人一定感觉很欣喜，在这个设备上有那么多好玩的东西可以折腾，特别是那些应用。但是对Web开发者来讲，却是渴望在iPhone上做出更优秀的Web App。这意味着我们需要对鼠标事件进行一些改变。现在我们可以办到了，尽管这些API起初会有些粗糙，可一旦你掌握了要领，你就可以在你的Web App上做一些很疯狂的事情。
我先来说说iPhone的控制台，因为我发现它在测试时是非常重要的。在Settings-Safari-Developer下，你可以把它打开或关闭。它提供了一些简单的信息，包括错误、警告等。
当我阅读这份[Apple Developer Connection page]文档之后，虽然它写的很生动和完整，但仍然给我留下了一些细节上的困惑。并且，如果你不是ADC（Apple开发者中心）的会员，看这个文档可能会让你更迷糊。
清理思路
Apple给API加了两个新想法：触摸（touch）和手势（gesture）。触摸用来记录你有多少手指放在屏幕上、它们都在哪里、它们在做什么操作以及它们的轨迹。手势来检测你在用两个手指做什么，是否在捏(pinching)、推(pushing)、或是在旋转(rotating)。
触摸
当你把一根手指头放在屏幕上时，触摸（touch）事件便被触发了。每当一根新的手指放在屏幕上，就会触发一个新的touchstart事件。而当手指抬起离开屏幕，touchend事件便被触发了。如果在手指接触屏幕后，你又挪动了这根手指，那么触发的是touchmove事件。
有以下touch事件：
- touchstart: 手指放在屏幕上时触发
- touchend: 手指离开屏幕时触发
- touchmove: 手指在屏幕上移动时触发
- touchcancel: 系统可以取消touch事件，但我不确定它如何才能触发。我想可能是当你拖放时，接到一个类似短信或者其它事件时，才会触发。但我没有测试成功过。
node.ontouchstart = function(evt){
console.log(evt.pageX + "/" + evt.pageY);
// 哦不! 值都是空的，肯定有BUG
}
阅读全文 »
在几天前，著名的JavaScript框架ExtJS宣布，将现有ExtJS整合JQTouch和Raphaël库，推出适用于最前沿Touch Web的Sencha Touch框架，该框架是世界上第一个基于HTML5的Mobile App框架。同时，ExtJS也正式更名为Sencha。原域名www.extjs.com也已经跳转至www.sencha.com。
同时，JQTouch的创始人David Kaneda，以及Raphaël的创始人也已加盟Sencha团队。“在未来的几个月内，我们的合作将会创造出令人惊叹的新东西来。不会等太久的，我保证！”Sencha的CEO Abraham Elias如是说。
Sencha，翻译意为“煎茶”，是指一种在日本很流行的绿茶品种，“我们之所以选择这个名字，因为它会唤醒下一代软件开发并且它很容易记忆、拼写和发音”，在Java开发的传统中，它代表了软件开发的一个新水平阶段。
另外，Sencha还成立了一个基金会叫“Sencha Labs”，以支持非商业项目开发。jQTouch和Raphaël将保留原有的MIT许可证。原JQTouch项目将由Jonathan Stark接手维护和更新。
OK，下面我们来看一下这个来势汹汹的Sencha Touch，它有什么令人惊叹的新东西。
阅读全文 »
随着通信业、移动设备产业、互联网产业的快速发展，如今我们已经可以明显地感受到，我们身边的移动设备越来越多，越来越智能，价格越来越低，也越来越与我们的生活密不可分。去年底在支付宝做分享时，我曾说过一句“Mobile WEB风暴，即将席卷中国”，现在看来，我们似乎已经开始接受风暴的洗礼了吧。
Mobile WEB，曾经或者现在，我们或许习惯性地称之为“WAP”，其实叫什么不重要，充其量只是个名字而已——就像Brian Suda在《Introduction to the mobile web》所说的那样——重要的是，我们到底该如何看待它，以及进行哪些思考。如今的“WAP”，早已不是当初只有一些超链接和一个LOGO的WML时代了。在《Mobile Design and Development》一书中，Brian Fling将如今的移动时代称为Mobile 2.0（对应WEB 2.0的叫法），这是个充满了富交互性的智能Mobile WEB时代。在这个时代中，我们利用手中的武器——前端技术，通过不断强大的移动浏览终端，可以实现更多精彩的用户体验，可以让手中的移动设备做出更多桌面设备办不到的事情。
（注意：Mobile 2.0并不同于WAP 2.0。它是指整个移动互联网行业的时代特征，是个广义的叫法。而WAP 1.0主要指WML规范时代、WAP 2.0主要指XHTML-MP规范时代，这种定义是偏技术领域，是相对狭义的）
与桌面WEB前端开发不同的是，Mobile WEB前端开发需要关注更多更杂的东西，并且技能发展的倾向性也会与前者略有不同。移动设备的种类太多，更新频率也真的太快了，因此相应的内置浏览器也会随之发生变化，这些复杂程度会让人觉得眼花缭乱。而对于第三方浏览器，在不同平台下的表现不尽相同，对WEB规范的支持程度也不相同，并且占有率、版本更新频率也并不稳定，同样充满了很大变数。以上这些问题，都是Mobile WEB前端开发领域特有的，并且是需要不断地研究和探索的。
阅读全文 »
Comments