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

news/2024/7/20 22:22:51 标签: 前端开发, web, html, 扩展, ios
htmledit_views">

转载地址:http://www.cnblogs.com/pifoo/archive/2011/05/22/html" title=web>webkit-touch-event-2.html


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



http://www.niftyadmin.cn/n/1391178.html

相关文章

Memcached Multiget

为什么80%的码农都做不了架构师?>>> 解决方案: One solution to the multiget hole problem is replication. By FB. 如果我只有一台机器,一次取1000条,明显不是明智的。 0.一次取10条,lazy; 1…

8-js高级-1

JavaScript 进阶 - 1 学习作用域、变量提升、闭包等语言特征,加深对 JavaScript 的理解,掌握变量赋值、函数声明的简洁语法,降低代码的冗余度。 作用域函数进阶解构赋值综合案例 作用域 了解作用域对程序执行的影响及作用域链的查找机制&…

第二十二章、软件安装:原始码与 Tarball

我们在第一章、Linux是什么当中提到了 GNU 计画与 GPL 授权所产生的自由软件与开放源码等咚咚。不过,前面的章节都还没有提到真正的开放源码是什么的信息!在这一章当中,我们将藉由 Linux 操作系统里面的运行档,来理解什么是可运行…

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

转载地址:http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-3.html 这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异)。这个 事件是对touch event的更高层的封装,和t…

从鞋子的磨损度看性格

从鞋子的磨损度看性格先看看右脚的鞋底,再看看你左脚的鞋底,损坏情况是什么样的呢?A、右侧鞋底耗损大B、左侧鞋底耗损大C、左右两侧鞋底耗损程度相同D、鞋底前端耗损大E、鞋底外侧耗损大F、鞋底面耗损均匀G、鞋跟后侧耗损大H、鞋底内侧耗损大★选A的人&…

在智能交通系统中基于 Drools BRMS 实现业务规则动态管理

为什么80%的码农都做不了架构师?>>> 引言 业务规则管理系统(BRMS)在电信,银行和政府等各行业中广泛使用,用来支持业务规则的编辑,管 理和部署,以适应业务的快速变化。Drools 是一款…

javascript中toFixed不同浏览器解析不一样的问题,好扯。。。。

document.write("1.255:"(1.255).toFixed(2)"<br/>");document.write("2.255:"(2.255).toFixed(2)); IE6下为&#xff1a; 1.26 2.26 Chrome下为&#xff1a; 1.25 2.25 因此引用了哥覆盖方法&#xff0c;做到兼容 //重写toFixed方法…

关于ready和load方法作用于不同情况下的比较

jQuery中有两个方法——ready和load。它们非常容易混淆。这里做一下区分&#xff1a; jQuery中的ready特指“DOM”全部加载完毕&#xff0c;也就是说&#xff0c;只要DOM加载完毕了&#xff0c;这个事件自然被触发了。所谓“DOM”加载完毕指整个页面的标签部分全部加载完毕&…