指尖下的js ——多触式web前端开发之二:处理简单手势(转)

这篇文章将描述多触式网页开发中对手势(Gesture)事件的处理。 
    水果设备中的Gesture,广义的说包括手指点击(click),轻拂(flick),双击(double-click),两只手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情。iOS上设计了了一系列手势来模拟和扩展鼠标操作,比如手指放下后迅速提起会触发click事件,手指向上滑动,停止,会触发body的onscroll事件等等。但是,狭义的Gesture事件,也就是能够addEventListener的GestureEvent对象,却并不是一个非常强大的存在,它只在有两根或多根手指放在屏幕上的时候触发,并且只包含手指分开比例(scale)和手指转动角度(rotation)信息。对于其他各种常用的手势,我们必须利用别的事件来处理。 
    下面从单根手指的事件开始说起。。。 
    我们先来考虑一个最简单的手势,手指放下后迅速提起,这个手势做出来后会发生什么?大家当然会想到click,其实在click发生以前,还有很多事情发生,请看下图:

这里先解释一下什么是clickable element,就是一个绑定了click, mousedown, mouseup, mousemove事件
的任何html element(注意,没有绑定事件处理的element不算clickable element)。从这张图可以看出,手
指提起的一刹那,首先触发的并不是click事件,而是mouseover和mousemove。然后,系统会判断接收到事
件的element的内容是否被改变,如果内容被改变,接下来的事件都不会触发,如果没有改变,会按照
mousedown,mouseup,click的顺序触发事件。什么?你问mouseout在哪?这个事件的处理,比较尴尬,
上面说的一系列事件都完了以后,如果你再点击一个clickable element,就会触发上一个clickable element的
mouseout事件了。。。比较纠结,建议不要在多触版网页上使用mouseout。 
    那么,如果手指放下后不提起又会发生什么呢?什么都不会发生,没有任何事件会被触发。但是,如果对象
是一个img并且有alt属性的话,这个动作将会显示img的alt字符串。如果是一个link的话,这个动作会显示“在
新窗口打开连接”选项,但是,不会有任何用户定义事件触发。 
    最后一种关于单根手指的事件,是放下后滑动手指。注意,在滑动的过程当中,不会触发除touchmove以外
的任何事件(请不要试图在这时处理mousemove)。手指在滑动的时候,整个page应该会跟着移动,除非你
preventDefault了body的touchmove。当手指停下来后,page的onscroll将会触发。除此之外,没有什么我
们熟悉的事情会发生。

时间: 2024-10-06 13:40:46

指尖下的js ——多触式web前端开发之二:处理简单手势(转)的相关文章

指尖下的js —— 多触式web前端开发之三:处理复杂手势(转)

这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异).这个事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend三个事件回调: gesturestart    // 当有两根或多根手指放到屏幕上的时候触发 gesturechange    // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发 gestureend    // 当倒数第二根手

指尖下的js ——多触式web前端开发之一:对于Touch的处理

http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html 水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感,因为正是他们(而不是水果)让iOS的世界变的丰富多彩.然而对于我们这些以web为自己事业核心的程序员来说,这种让人欲罢不能的多触式体验似乎跟我们关系

高效Web前端开发之路:YUI 3.15 PDF扫描版

JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准--ECMAScript.JavaScript具有使用局限性.在Web方面,其必须与各种DOM技术结合才能发挥作用.因此,一些具有开拓创新精神的开发者们便开发出了各种丰富的第三方框架,通过第三方的支持代码实现浏览器兼容性的统一.代码的简化以及功能的增强. <高效Web前端开发之路:YUI 3.15>作者便是在此背景下,以国外最优秀的JavaScript框架之一

Web前端开发之EasyUI

EasyUI是一宗基于JQuery的用户界面插件集合.因此Jquery EasyUI的目的就是帮助Web开发者能够易如反掌的打造出功能丰富并且非常漂亮的UI界面. EasyUI一个很大的好处就是,你不需要很懂JavaScript,也不需要对CSS样式有深刻的研究,你需要了解一些简单的HTML标签,就能随心所欲的设计精美的Web前端界面. Jquery EasyUI的优势 1为创建现代化,互动,JavaScript应用程序,提供必要的功能. 2大大的节省开发的时间和资源 3一个字easy 两个字简

Sea.js创始人玉伯的前端开发之路

玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的. 在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框架.本期[开源专访]我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框架.前

【开源专访】Sea.js创始人玉伯的前端开发之路

摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的. 在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框架.本期[开源专访]我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框

二十二、【轻量级开源框架】EFW框架Web前端开发之JqueryEasyUI

回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu.com/s/1o6MAKCa 前言:EFW框架主要用于行业软件软件开发,所以软件的界面需要体现专业.漂亮.风格统一的效果:在Web方便这种界面框架还是有不少,如强大的EXT,基于Jquery的JqueryUI,还有一些国产的也都比较漂亮:而EFW框架中推荐的是JqueryEasyUI,为什么选择

我的IT梦——web前端开发之HTML,CSS(一)

HTML HTML全称HyperText Markup Language(超文本标记语言) 标签成对出现 <!DOCTYPE html>    文档类型定义 < >    标记||标签 charset=UTF-8    字符编码集,万国码 <head></head>    头部 <body></body>    内容 <!-- -->    注释 标题<h1></h1><h2></

web前端测试(二)

web前端测试(二)   HTML 语言中,设置表格中文字与边框距离的标签是() * [单选题] * A.<table boder=””> B.<table cellspacing=””> C.<table cellpadding=””>(正确答案) D.<table width=””> 以下说法,错误的是() * [单选题] * A.mark用于显示变粗的文字(正确答案) B.<del>用于显示删除的文本 C.<ins>的文字会带下