程 广
2013 年 1 月 10 日期

Dojo 眼前行过的手势。:

  • Tap:点击庇护。。
  • Double tap:双点取庇护。
  • Hold:手指点亮庇护,继续一段时期。。
  • Swipe:手指在庇护上滑动。。Dojo Api 支持者这种姿势可以装备滑动继续时期和随意开动交流。。

HTML 射中靶子 Touch 事情

HTML Touch 大约的事情是手势的根底。。经过对 Touch 事情的监听,we的有格形式可以在庇护上归因于手指的滑动轨迹。,这样判别用户的手势。。合乎逻辑的推论是,想仿真 Dojo 华语手势的意识到,we的有格形式需求率先晓得。 HTML 中 Touch 大约事情的跳跃序列和牵制在该事情射中靶子从科学实验中提取的价值。。

触控装备(比如智能手机)上支持者触摸事情的浏览顺序普通都意识到了以下各自的事情:

  • touchstart:当用户的手指落在装备庇护上时,会产生此事情。。
  • touchmove:该事情当用户手指在庇护上滑动。时产生。
  • touchend:当用户手指分开装备庇护时产生此事情。。
  • touchcancel:当用户的手指移出文档广袤时,会产生此事情。。

在 W3C 几乎 Touch 它是在事情公认为优秀的中规则的。 Touch 事情从科学实验中提取的价值建筑物。

清单 1 Touch 事情电话话筒

 interface TouchEvent : UIEvent { 
    readonly attribute TouchList   touches; 
    readonly attribute TouchList   targetTouches; 
    readonly attribute TouchList   changedTouches; 
    readonly attribute boolean     altKey; 
    readonly attribute boolean     metaKey; 
    readonly attribute boolean     ctrlKey; 
    readonly attribute boolean     shiftKey; 
    readonly attribute 事情目的 relatedTarget; 
 };

在交流中,we的有格形式注意到有三训练型的属性。 TouchList。 在位的 touches 牵制以后文档混合的上的有事情。 Touch 交流,targetTouches 牵制鉴于以后文档的有混合的。 target 的 Touch 交流,由于 Touch 该事情鉴于 Bubble 在文档树中去世该方式。,因而这两个列表未必相等的。。

changedTouches 属性是特别的。,它在辨别的事情中有辨别的牵涉。。说起 touchstart 事情,有效的触点点被希腊字母第12字。。说起 touchmove 事情,它希腊字母第12字从在前方事情开动的点(即,轨迹)。。

TocuhList 及其使分裂 Touch 列表中显示了从科学实验中提取的价值建筑物。 2。

清单 2 TouchList 电话话筒和 Touch 电话话筒

 interface TouchList { 
    readonly attribute unsigned long length; 
    getter Touch item (未署名的) long 关键) 
    Touch        identifiedTouch (长) 身份证) 
 }; 

 interface Touch { 
    readonly attribute long        identifier; 
    readonly attribute 事情目的 target; 
    readonly attribute long        screenX; 
    readonly attribute long        screenY; 
    readonly attribute long        clientX; 
    readonly attribute long        clientY; 
    readonly attribute long        pageX; 
    readonly attribute long        pageY; 
    readonly attribute long        radiusX; 
    readonly attribute long        radiusY; 
    readonly attribute float       rotationAngle; 
    readonly attribute float       force; 
 };

从名单上 2 可以看出,we的有格形式可以从中学到 TouchList 该建筑物归因于触点点的量子和使调和和S。。说起不支持者多点的触摸的浏览顺序,,touches 和 targetTouches 不变的单独地每一元素。。

支持者鼠标事情(比如) click 事情)的 DOM 元素,感情举措不但跳跃 Touch 事情可能性跳跃鼠标事情。。跳跃挨次率先被跳跃。 Touch 事情,当手指分开触屏并产生时。 touchend 跳跃事情后的鼠标事情。设想 touchstart 事情和 touchend 事情当中的轮流更长或更长。 Touch 在事情的处置功能中大声喊。 preventDefault 功能,鼠标事情弱被跳跃。。

为了检查浏览顺序对 Touch 事情工具的辨别,Dojo 在包 中对 Touch 事情被封装起来。。Dojo 在 规定了包。 press、move、release 和 cancel 四事情,并将 touches 取代第每一元素,元素的有属性都被付印到事情瞄准。。

Dojo Gesture 辨析

Dojo 在包 中装备了对手势功能的支持者。在本条文中,我出生于右翼 对全世界的应用辨析。 Dojo 到何种地步意识到的手势功能。

在 Dojo 源信号 .test 软件包中有每一与试验参与的页。 。清单 3 这是它的信号的偏袒的。。

清单 3. dojo.ready 切开信号

 var inner = (户内的) 
 在(内在), tap, 行为) 
 在(内在), , 行为) 
 在(内在), , 行为) 
 在(内在), swipe, swipeAction);

在本信号中:inner 是 HTML 射中靶子每一 DIV 元素。tap 和 swip 是 Dojo 装备了两个手势瞄准。。we的有格形式都晓得,on 功能是 Dojo 1.7 新中国混录的事情机制,它的功能是产生在 DOM 混合的上的事情与对应的的事情处置顺序中间定位联。。

你可以从就是这样信号中便笺。,Dojo 意识到手势的方式是率先监督用户的手势。,设想规定了手势,则跳跃自规定手势。。

接下来,we的有格形式承担它 .tap 以瞄准为例来详述到何种地步意识到手势。。

.tap 瞄准类出生于 .Base 继位而来。we的有格形式区别两类信号来找出。,.tap 对父类的修正包孕以下各自的形势。

  • 设置属性 defaultEvent 的值为 tap
  • 设置属性 子肉体的 值是每一打扮。 [容纳],”doubletap”]. 可以猜,清单 3 在信号中 和 它本应与就是这样属性参与。。
  • 重写父类 press 和 release 方式。

让we的有格形式先仿真一下。 press 和 release 这两种方式。这两种方式在 .Base 只在类中宣言,和他们一齐 move 和 cancel 两个方式。理性 Base 类的正文,这四种方式代表手势的四价元素阶段。。Tap 字面意义是不安。、轻击。按字面意义,tap 单独地手势 press 和 release 两个阶段,合乎逻辑的推论是 .tap 单独地意识到 press 和 release 方式。

清单 4..tap 切开信号

press: function(/*Object*/data, /*Event*/e){
// summary:
//记载一圈跑道手势的初始交流并设定初值每一Timeout句柄用来检测hold手势
		if(e.touches && e.touches.length >= 2){
			//tap 手势只支持者单点触摸。
			delete ;
			return;
		}
		var target = ;
		this._initTap(data, e);
		 = setTimeout((就是这样, function(){
设想(从科学实验中提取的价值, e)){
(目的), {型 ""});
			}
			delete ;
		}), );
	},
	release: function(/*Object*/data, /*Event*/e){
		// summary:
当触碰事情产生时,检测并跳跃TAP或双点取。 一圈跑道手势
		if(!){
			clearTimeout();
			return;
		}
设想(从科学实验中提取的价值, e)){
接线台(C)
			case 1: 
				(, {型 TAP}
				break;
			case 2:
				(, {型 ""});
				break;
			}
		}
		clearTimeout();
	},
	_initTap: function(/*Object*/data, /*Event*/e){
		// summary:
		//	使恢复一圈跑道手势的从科学实验中提取的价值 
		if(!){
			 = {x: 0, y: 0, t: 0, c: 0};
		}
		var ct = new GET时期
IF(CT) - .t <= this.doubleTapTimeout){
			.c++;
		}else{
			.c = 1;
			.x = e.screenX;
			.y = e.screenY;
		}
		.t = ct;
	},
_isTap: function(/*Object*/data, /*Event*/e){
		// summary:
		//		Check whether it''s an valid tap
		var dx = (.x - e.screenX);
		var dy = (.y - e.screenY);
		return dx <= this.tapRadius && dy <= this.tapRadius;
	}

we的有格形式发现,在 press 和 release 功能中,fire 功能被反复大声喊。。功能 fire 是在 Base 在类中规定,它的功能是利用 Dojo 的事情 API dojo.on 在指定中 DOM 跳跃混合的上的特定事情。

让we的有格形式来看便笺何种地步检测手势。。在清单 4 在位的每一叫做 _isTap 的功能。从字面意义来看,we的有格形式可以确定它是否用于确定手势是否是CU。 Tap 手势。经过阅读信号,we的有格形式可以便笺功能在 release 大声喊功能,户内的功能经过检测。 release 事情使调和 press 事情使调和 press 功能经过大声喊来大声喊 _initTap 来确定它们当中的距离。 Tap 手势。请注意这些功能射中靶子参数列表。 data 参数,它用于保存判别手势所需的从科学实验中提取的价值。。

到此,we的有格形式大致了解到何种地步利用它。 Dojo Gesture 库意识到自规定手势。但是,有各自的关键问题we的有格形式还没有弄清楚。。

  • we的有格形式的活动有什么特点?
  • 这四价元素阶段的举措是到何种地步跳跃的?
  • we的有格形式可以在非触摸装备上意识到手势吗?

让we的有格形式继续看。 Dojo 自己的例子 . 设想在 inner div 元素敲击 tap 手势的话,您将找到父混合的。 outer div 也可以接收元素。 tap 事情。这说明we的有格形式发出了什么。 tap 事情是 bubble 性质的。

归因于剩下的两个问题的答案。,we的有格形式需求继续we的有格形式的详述。 ._Base 的信号。请参阅下面的信号。:

清单 5.._Base 的 _add 方式

 _add: function(/*Dom*/node, /*String*/type, /*function*/listener){ 
			 // summary: 
			 // 	将 touch 事情的各自的阶段绑定到对应的的处置功能。
             var element = (混合的) 
             if(!元素) 
                // the first time listening to the node 
                 element = { 
                     target: node, 
                     data: {}, 
                     handles: {} 
				 }; 

                 var _press = (就是这样, 过程, element, 按 
                 var _move = (就是这样, 过程, element, 开动 
                 var _release = (就是这样, 过程, element, 释放 
                 var _cancel = (就是这样, 过程, element, 取消 

                 var handles = ; 
                 if(){ 
                     handles.press = on(混合的), ''touchstart'', 出版社) 
                     handles.move = on(混合的), ''touchmove'', 开动) 
                     handles.release = on(混合的), ''touchend'', 释放) 
                     handles.cancel = on(混合的), ''touchcancel'', 取消) 
                 }else{ 
                     handles.press = touch.press(node, 出版社) 
                     handles.move = touch.move(node, 开动) 
                     handles.release = touch.release(node, 释放) 
                     handles.cancel = touch.cancel(node, 取消) 
				 } 
                 (元素) 
             } 
             // track num of listeners for the gesture event - type 
            // so that we can release element if no more gestures being monitored 
            [类型] = ![类型] ? 1 : ++[类型];

			 return on(混合的), type, 倾听者) //handle 
		 }

从正文,此方式适用于 dom node 处置句柄添加手势事情。

当事情仅支持者触摸装备时,功能将对应于 touch 事情映射到 _Base 类对应法。这些方式也大声喊事情。 press, move, release 和 cancel 方式跳跃we的有格形式的手势。。

当事情同时支持者触摸和鼠标举措时,采用该方式。 处置对应的的触摸。 / 监控鼠标事情。

总结

经过以上讨论,we的有格形式可以总结意识到自规定手势的步骤。

  1. 从 ._Base 继位
  2. 意识到 press, move, release 和 cancel 功能,监控记载 touch/ 鼠标事情从科学实验中提取的价值。这些从科学实验中提取的价值可以希腊字母第12字在这些功能中。 data 参数中。
  3. 在适当的时期经过 fire 方式手势


no comments

Leave me comment