指尖下的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将会触发。除此之外,没有什么我
们熟悉的事情会发生。
指尖下的js ——多触式web前端开发之二:处理简单手势(转)的更多相关文章
- 指尖下的js —— 多触式web前端开发之三:处理复杂手势(转)
这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异).这个事件是对touch event的更高层的封装,和touch一样,它同样包括gestu ...
- 指尖下的js ——多触式web前端开发之一:对于Touch的处理
指尖下的js ——多触式web前端开发之一:对于Touch的处理 水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使 ...
- Sea.js创始人玉伯的前端开发之路
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...
- 【开源专访】Sea.js创始人玉伯的前端开发之路
摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...
- 二十二、【轻量级开源框架】EFW框架Web前端开发之JqueryEasyUI
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...
- 植入式Web前端开发方法
上一篇,我讲述了植入式Web前端开发的基本情况,本篇就来探究其开发方法.以下假定CMS只能植入前端代码,并且需求规模是任意大小的. 代码形式 HTML代码是直接植入的毫无疑问,但除非植入的代码非常简短 ...
- 植入式Web前端开发
在博客园.凡科建站和其他的一些CMS系统中,提供有允许管理者向网页中插入自定义HTML代码的功能,我将其称之为"植入式"的Web前端代码. 因为CSS和JavaScript可以直接 ...
- Silence.js高效开发移动Web前端类库
基于Zepto的轻量级移动Web前端JavaScript类库. 编写这个类库原因及目的: 采用MVC设计模式,使代码工程化结构化. 使用RouterJS,提升前端交互性能,延长页面使用时间,并通过Aj ...
- web前端开发面试题(Vue.js)
1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? ...
随机推荐
- 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 ...
- SNS网站的用户流失率怎么会高得如此惊人?
作者:黄绍麟 原51.com高管 用户典型的SNS体验 甲先生是个普通白领,白天工作使用互联网找资料连络客户,下班后回家偶而会上网闲逛.互联网是他日常接触的媒介,但是在他生命中这个东西并不显得特别重要 ...
- Android 关于 ActionBarSherlock 的使用
原文地址 本文内容 使用 主题化 ActionBarSherlock 演示项目 本文 ActionBarSherlock 简单演示 最近一个星期被 actionsherlock 搞得很不爽(光去足疗店 ...
- HTTP协议综合
1.用浏览器模拟各种User Agent 测试页面的时候经常需要不同的User Agent,Firefox.Chrome浏览器就可以完美的模拟出各种User Agent.User Agent Swit ...
- spring MVC、mybatis配置读写分离,ReplicationDriver(转载)
参考:http://shift-alt-ctrl.iteye.com/blog/2271730c 环境: 3台数据库机器,一个master,二台slave,分别为slave1,slave2 2.要实现 ...
- 调用OpenCVSharp进行拍照
一.核心代码: using OpenCvSharp; using System; using System.Collections.Generic; using System.IO; using Sy ...
- 初识:JMX
来自:http://blog.csdn.net/derekjiang/article/details/4531952 JMX是一份规范,SUN依据这个规范在JDK(1.3.1.4.5.0)提供了JMX ...
- linux 端口转发
一 从一台机到另一台机端口转发 启用网卡转发功能#echo 1 > /proc/sys/net/ipv4/ip_forward 举例:从192.168.0.132:21521(新端口)访问192 ...
- Java之所有对象的公用方法>9.Always override hashCode when you override equals
You must override hashCode in every class that overrides equals.
- 〖Linux〗Linux高级编程 - 进程间通信(Interprocess Communication)
[转自: http://blog.csdn.net/Paradise_for_why/article/details/5550619] 这一章就是著名的IPC,这个东西实际的作用和它的名字一样普及.例 ...