这篇文章将描述多触式网页开发中对手势(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将会触发。除此之外,没有什么我
们熟悉的事情会发生。

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

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

    这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异).这个事件是对touch event的更高层的封装,和touch一样,它同样包括gestu ...

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

    指尖下的js ——多触式web前端开发之一:对于Touch的处理 水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使 ...

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

    在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...

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

    摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...

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

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  6. 植入式Web前端开发方法

    上一篇,我讲述了植入式Web前端开发的基本情况,本篇就来探究其开发方法.以下假定CMS只能植入前端代码,并且需求规模是任意大小的. 代码形式 HTML代码是直接植入的毫无疑问,但除非植入的代码非常简短 ...

  7. 植入式Web前端开发

    在博客园.凡科建站和其他的一些CMS系统中,提供有允许管理者向网页中插入自定义HTML代码的功能,我将其称之为"植入式"的Web前端代码. 因为CSS和JavaScript可以直接 ...

  8. Silence.js高效开发移动Web前端类库

    基于Zepto的轻量级移动Web前端JavaScript类库. 编写这个类库原因及目的: 采用MVC设计模式,使代码工程化结构化. 使用RouterJS,提升前端交互性能,延长页面使用时间,并通过Aj ...

  9. web前端开发面试题(Vue.js)

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数?  ...

随机推荐

  1. SQLSERVER 免费对比数据库结构和数据的工具支持:SQL Server 2012, SQL Server 2008 and SQL Server 2005

    New xSQL Schema Compare - version 5 Compare the schemas of two SQL Server databases, review differen ...

  2. SNS网站的用户流失率怎么会高得如此惊人?

    作者:黄绍麟 原51.com高管 用户典型的SNS体验 甲先生是个普通白领,白天工作使用互联网找资料连络客户,下班后回家偶而会上网闲逛.互联网是他日常接触的媒介,但是在他生命中这个东西并不显得特别重要 ...

  3. Android 关于 ActionBarSherlock 的使用

    原文地址 本文内容 使用 主题化 ActionBarSherlock 演示项目 本文 ActionBarSherlock 简单演示 最近一个星期被 actionsherlock 搞得很不爽(光去足疗店 ...

  4. HTTP协议综合

    1.用浏览器模拟各种User Agent 测试页面的时候经常需要不同的User Agent,Firefox.Chrome浏览器就可以完美的模拟出各种User Agent.User Agent Swit ...

  5. spring MVC、mybatis配置读写分离,ReplicationDriver(转载)

    参考:http://shift-alt-ctrl.iteye.com/blog/2271730c 环境: 3台数据库机器,一个master,二台slave,分别为slave1,slave2 2.要实现 ...

  6. 调用OpenCVSharp进行拍照

    一.核心代码: using OpenCvSharp; using System; using System.Collections.Generic; using System.IO; using Sy ...

  7. 初识:JMX

    来自:http://blog.csdn.net/derekjiang/article/details/4531952 JMX是一份规范,SUN依据这个规范在JDK(1.3.1.4.5.0)提供了JMX ...

  8. linux 端口转发

    一 从一台机到另一台机端口转发 启用网卡转发功能#echo 1 > /proc/sys/net/ipv4/ip_forward 举例:从192.168.0.132:21521(新端口)访问192 ...

  9. Java之所有对象的公用方法>9.Always override hashCode when you override equals

     You must override hashCode in every class that overrides equals.

  10. 〖Linux〗Linux高级编程 - 进程间通信(Interprocess Communication)

    [转自: http://blog.csdn.net/Paradise_for_why/article/details/5550619] 这一章就是著名的IPC,这个东西实际的作用和它的名字一样普及.例 ...