水果公司的那些small and cute的设备给我们提供了前所未有的用户体验。当用户iphone和ipad上运指如飞的时候,那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感,因为正是他们(而不是水果)让iOS的世界变的丰富多彩。然而对于我们这些以web为自己事业核心的程序员来说,这种让人欲罢不能的多触式体验似乎跟我们关系不大,因为浏览器那一小块地方就是我们和用户的全部交集了。而许多网站为了让iOS的用户能够在多触式体验下使用自己的服务,都专门花钱开发objective-c的本地程序作为自webservice的客户端。
其实,对于一个web程序员或者一个网站来说,如果你的需求仅仅是让iPhone/iPad用户能够正常使用你的服务,那现有的html4页面完全能够满足(也许需要一点点重构,但是很容易);如果再往上一点,你需要让你的web客户端看起来像是用objective-c实现的一样,也并非不可能,只需要将我们熟悉的javascript搬到iOS设备上来就行。
本文从一个多触式网页开发初学者的角度,首先简单介绍一下iOS上的浏览器(这里主要指Safari)所支持的多触式事件模型,然后将触控(Touch)这种简单的动作升级为手势(Gestrue),最后将javascript + html + css构建的应用脱离浏览器,放到iOS设备的屏幕上成为一个本地link并和植物大战僵尸放到一起。
iOS上的Safari也支持click 和mouseover等传统的交互事件,只是不推荐在iOS的浏览器应用上使用click和mouseover,因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在iOS上会有半秒左右的延迟,原因是iOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以,在iOS上,应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级的Gesture事件,能让你的网页交互起来像native应用一样。
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:
touchstart: // 手指放到屏幕上的时候触发
touchmove: // 手指在屏幕上移动的时候触发
touchend: // 手指从屏幕上拿起的时候触发
touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详。。
Gesture事件则是对touch事件的更高级的封装,主要处理手指slide、rotate、scale等动作,将在下一篇文章详述。
在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类似的对象,这个对象封装一次屏幕触摸,一般来自于手指。它在touch事件触发的时候产生,可以通过touch event handler的event对象取到(一般是通过event.changedTouches属性)。这个对象包括一些重要的属性:
client / clientY:// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY:// 触摸点相对于页面的位置
screenX /screenY:// 触摸点相对于屏幕的位置
identifier: // touch对象的unique ID
下面我们看一个简单例子:当手指触摸屏幕时弹出一个红色层,手指动时跟着动,手指离开时层消失
.spirit { /* 方块的class名称*/
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
<body style=”height: 100%;margin:0;padding:0”>
<div id=”canvas” style=”position: relative;width:100%;height: 100%;”></div>
</body>
定义touchstart的事件处理函数,并绑定事件:
// define global variable
var canvas = document.getElementById(“canvas”),
spirit, startX, startY;
// touch start listener
function touchStart(event) {
event.preventDefault();
if (spirit ||! event.touches.length) return;
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;
spirit = document.createElement(“div”);
spirit.className = “spirit”;
spirit.style.left = startX;
spirit.style.top = startY;
canvas.appendChild(spirit);
}
// add touch start listener
canvas.addEventListener(“touchstart”, touchStart, false);
首先,我们将方块spirit作为一个全局对象,因为我们现在要测试单根手指所以屏幕上最好只有一个物体在移动(等会有多触实例)。在touchStart这个事件处理函数中,我们也首先判断了是否已经产生了spirit,也就是是否已经有一个手指放到屏幕上,如果是,直接返回。
和传统的event listener一样,多触式系统也会产生一个event对象,只不过这个对象要多出一些属性,比如这里的event.touches,这个数组对象获得屏幕上所有的touch。注意这里的event.preventDefault(),在传统的事件处理函数中,这个方法阻止事件的默认动作,触摸事件的默认动作是滚屏,我们不想屏幕动来动去的,所以先调用一下这个函数。我们取第一个touch,将其pageX/Y作为spirit创建时的初始位置。接下来,我们创建一个div,并且设置className,left,top三个属性。最后,我们把spirit对象appendChild到容器中。这样,当第一根手指放下的时候,一个红色的,50px见方的方块就放到屏幕上了。
然后,我们要开始处理手指在屏幕上移动的事件:
function touchMove(event) {
event.preventDefault();
if (!spirit || !event.touches.length) return;
var touch = event.touches[0],
x = touch.pageX – startX,
y = touch.pageY – startY;
spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
}
Canvas.addEventListener(“touchmove”, touchMove, false);
在touch move listener中,我们使用webkit特有的css属性:webkitTransform来移动方块,这个属性具体怎么用请google之。建议构造面向iOS设备的网页的时候尽量使用webkit自己的特性,不但炫,更可以直接利用硬件来提高性能。
最后,我们处理touchend事件。手指提起的时候方块从屏幕上移除。
function touchEnd(event) {
If (!spirit) return;
canvas.removeChild(spirit);
spirit = null;
}
canvas.addEventListener(“touchend”, touchEnd, false);
分享到:
相关推荐
Webapp设计与实践:必胜宅急送背后的思考.pdf
webapp界面UI框架Sencha Touch 是WEB APP的界面UI组件库,明显比jquery Mobile快.zip
Covid_19_Tracker_WebApp 正在施工:construction:
Qt使用QtWebApp搭建Http服务器实现文件下载
Ubuntu Web 应用程序打包器该节点模块允许开发人员轻松打包 Web 应用程序以在 Ubuntu Touch 平台上运行。 它可以直接从命令行使用,也可以直接在导入时使用(例如通过 Gulp)。命令行界面使用命令行界面时,必须提供...
Maguire Lab的深度学习癫痫发作检测WebApp :brain: 在浏览器中使用深度学习从单通道LFP / EEG脑记录中检测癫痫发作活动。 在线尝试: :它是如何工作的为应用提供一个包含啮齿动物EEG数据的CSV文件,其中每行是100 ...
webapp1 webapp1
webApp1:webApp
所有开源应用均受适用于Wire应用的使用条款的约束,并且只能根据适用于Wire应用的使用条款进行商业化,该条款可在上找到。 此外,如果您选择构建一个开源应用程序,则某些限制适用,如下所示: 一个。 您同意不更改...
webapp-allspark 在变形金刚电影中看到的全火花关于webapp-allspark 是我们的 Web-app Start-kit,用于生成纯前端项目。 它是从分叉出来的。按键设置ES6 社会保障局网络包React大口大口 ============修订完整的资产...
## Webapp一个多模块Maven Spring Web应用程序 #Spring Web应用程序: #特征: 多模块结构可降低复杂性并分离出不同层的代码 Spring 4.x的基于Java的配置...webapp-webapp:包含web.xml,所有的jsp,webjar,任何CSS
webapp2 的新项目模板,因为 google_appengine/new_project_template 是如此准系统! 特征: 使用 Bootstrap CSS 模板 使用 Jinja2 模板 在本地运行: git clone ...
webapp-速读Zarafa 的 WebApp 中的速读集成。概括此插件打开添加了从预览电子邮件打开对话框的选项,该对话框将使用库阅读电子邮件。 您可以配置每分钟阅读多少字。演示执照这个插件有一个 APGLv3 许可证。
Webapp模板贡献者:团队发型
React + Redux 简易版QQ音乐webApp项目查看运行:$ git clone https://github.com/guixianleng/react-music-webApp.git$ cd react-music-webApp$ npm install$ npm run start功能: 推荐 专辑歌曲列表 专辑详情 排行...
Maven坐标:org.eclipse.jetty:jetty-webapp:9.3.19.v20170502; 标签:eclipse、jetty、webapp、中文文档、jar包、java; 使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 ...
今天个小伙伴们分享一个好东西,webApp轮播效果,支持手机上用手左右滑动的效果,因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我就需要针对移动端的设备触摸事件做相应的轮播特效。大家可以去看下易迅的...
webapp2-starter 这基于我的app-engine-starter,但在google app引擎之外运行。 还要注意,我将main.py更改为wsgi.py并设置了应用程序变量,使其可与appfog一起使用。 事情摘要:: lib/ - will hold your ...
QtWebApp 分别封装 httpserver 和qtservice里面有使用例程方便移植和使用到项目中实现Web发布数据交互使用。
WebApp-CreatePost 建立网路应用程式建立资料库运行npm create table并插入数据 npm run migrate npm run insertdbApp webđăngtin。 俞CAU:越南UNG粪Web应用程序町người粪,町phépngười粪thựcHIENviệc陶...