[译]跨浏览器的多点触控与鼠标事件处理

标签: 推荐分享 ie10 ios touch wp7 | 发表时间:2011-11-28 11:25 | 作者:luoqingming Stanley
出处:http://www.ued163.com

原文地址:
http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx

原作者Ted Johnson, Graphics Program Manager Lead, Internet Explorer
译者sunnylqm,转发请注明。

本文主要解释了Web开发者如何通过使用IE10中新引入的pointer事件模型、iOS上的touch事件模型以及W3C标准的扩展鼠标事件模型来编写普适的跨浏览器的触控事件处理代码。

题外话:我很幸运的拥有一台三爽的700T开发者平板。通过它可以很好的体验IE Test Drive中的多点触控demosTouch EffectsLasso Birds。你可能也注意到了,Lasso Birds在除了IE10以外的设备和浏览器上也能很好的运行,比如,它的多点触控在iOS设备上也能运作。本文中,我以Lasso Birds的一些代码模式为例,将其普适拓展至兼容比较老的浏览器。
原文有附带一个触控绘图的demo,以下代码将基于这个demo讲解。)

代码部分

用鼠标来绘图的基本流程简单明了:

var drawingStarted = false;
function DoEvent(eventObject) {
	if (eventObject.type == "mousedown") {
		drawingStarted = true;
		startDraw(eventObject.pageX, eventObject.pageY);
	}
	else if (eventObject.type == "mousemove") {
		if (drawingStarted) {
			extendDraw(eventObject.pageX, eventObject.pageY);
		}
	}
	else if (eventObject.type == "mouseup") {
		drawingStarted = false;
		endDraw();
	}
}

唯一需要改动以支持IE10的pointer事件的地方就是得注意多点触控可能同时发生(多个点由不同的pointerId区分)。IE10的 pointer模型会触发每个触点的单独的MSPointerDown, MSPointerMove和MSPointerUp事件。

var drawingStarted = {};
function DoEvent(eventObject) {
	eventObject.preventManipulation(); // 如果不加上这句, 则屏幕的拖动会代替绘图的动作
	var pointerId = eventObject.pointerId;
	if (eventObject.type == "MSPointerDown") {
		drawingStarted[pointerId] = true;
		startDraw(pointerId, eventObject.pageX, eventObject.pageY);
	}
	else if (eventObject.type == "MSPointerMove") {
		if (drawingStarted[pointerId]) {
		extendDraw(pointerId, eventObject.pageX, eventObject.pageY);
		}
	}
	else if (eventObject.type == "MSPointerUp") {
		delete drawingStarted[pointerId];
		endDraw(pointerId);
	}
}

要兼容Apple的iOS的touch事件模型则需要你遍历每一个 touchstart, touchmove, 和touchend事件中的changedTouches。因为在iOS事件模型中,同一个事件中可能包含同时产生的不同状态的触控点。像IE10的 pointer模型一样,我们也需要用唯一的id来区分不同的触控点。

var drawingStarted = {};
function DoEvent(eventObject) {
	eventObject.preventDefault(); // 如果不加上这句, 则屏幕的拖动会代替绘图的动作
	for (var i = 0; i < eventObject.changedTouches.length; ++i) {
		var touchPoint = eventObject.changedTouches[i];
		var touchPointId = touchPoint.identifier;
		if (eventObject.type == "touchstart") {
			drawingStarted[touchPointId] = true;
			startDraw(touchPointId, touchPoint.pageX, touchPoint.pageY);
		}
		else if (eventObject.type == "touchmove") {
			if (drawingStarted[touchPointId]) {
				extendDraw(touchPointId, touchPoint.pageX, touchPoint.pageY);
			}
		}
		else if (eventObject.type == "touchend") {
			delete drawingStarted[touchPointId];
			endDraw(touchPointId);
		}
	}
}

合并以上三种代码需要注意事件名称和触控点id名称的区别,以及鼠标事件模型中并没有触控点id。
在以下合并后的代码中,我也加入了对”move”事件是否实际发生的检查。这是因为在IE10的pointer模型中,如果一个触控点始终被压下但没有移 动,即便产生完全相同的x和y坐标,MSPointerMove事件也会被持续触发。通过过滤这些冗余的“移动”,可以消除这些对 extendDraw()的无谓调用。我是这样实现这个检查的:将上一次的start或move事件中的xy坐标存储到一个lastXY的对象中,然后在 后续的事件中检查这个lastXY。lastXY此时代替了前两段示例代码中的drawingStarted对象。

var lastXY = { };
function DoEvent(eventObject) {
	// 阻止拖动和缩放使得绘图能够正常进行
	if (eventObject.preventManipulation)
		eventObject.preventManipulation();
	else
		eventObject.preventDefault();

	// 如果存在changedTouches数组,则使用它,否则使用eventObject创建一组
	var touchPoints = (typeof eventObject.changedTouches != 'undefined') ? eventObject.changedTouches : [eventObject];
	for (var i = 0; i < touchPoints.length; ++i) {
		var touchPoint = touchPoints[i];
		// 获取唯一的touchPoint id,如果不存在,则使用1作为默认值
		var touchPointId = (typeof touchPoint.identifier != 'undefined') ? touchPoint.identifier : (typeof touchPoint.pointerId != 'undefined') ? touchPoint.pointerId : 1;

		if (eventObject.type.match(/(down|start)$/i)) {
			// 处理mousedown, MSPointerDown,以及touchstart事件
			lastXY[touchPointId] = { x: touchPoint.pageX, y: touchPoint.pageY };
			startDraw(touchPointId, touchPoint.pageX, touchPoint.pageY);
		}
		else if (eventObject.type.match(/move$/i)) {
			// 处理mousemove, MSPointerMove,以及touchmove事件
			if (lastXY[touchPointId] &#038;& !(lastXY[touchPointId].x == touchPoint.pageX &#038;& lastXY[touchPointId].y == touchPoint.pageY)) {
				lastXY[touchPointId] = { x: touchPoint.pageX, y: touchPoint.pageY };
				extendDraw(touchPointId, touchPoint.pageX, touchPoint.pageY);
			}
		}
		else if (eventObject.type.match(/(up|end)$/i)) {
			// 处理mouseup, MSPointerUp,以及touchend事件
			delete lastXY[touchPointId];
			endDraw(touchPointId);
		}
	}
}

上面这个例子略去了注册和接受事件以及确保它们被应用在绘图目标上的代码。要使这些代码真正能在所有的浏览器——包括IE9之前的浏览器上跑起来,则还需要一些额外的工作。感兴趣的朋友可以阅读这个跨浏览器的多点触控绘图类的最终代码
通过同时为鼠标和触控设备编码,web开发者可以确保他们的站点工作在所有的浏览器上——无论是PC,平板还是手机。

相关 [浏览器 多点触控 鼠标] 推荐:

[译]跨浏览器的多点触控与鼠标事件处理

- Stanley - UED TEAM,用户体验设计,web前端开发
原作者Ted Johnson, Graphics Program Manager Lead, Internet Explorer. 译者sunnylqm,转发请注明. 本文主要解释了Web开发者如何通过使用IE10中新引入的pointer事件模型、iOS上的touch事件模型以及W3C标准的扩展鼠标事件模型来编写普适的跨浏览器的触控事件处理代码.

微软 Touch Mouse 多点触控鼠标动手玩

- 云飞风起 - Engadget 中国版
微软主攻软件,但是硬件也并非没有建树,鼠标和键盘也是新品不断. 这次我们来看看刚刚在中国上市的 Touch Mouse 多点触控鼠标,这款产品已经在海外上市多日,上图看到的是行货版. 这是款专为 Windows 7 设计的多点触控鼠标,所以如果你的系统还保留在 XP 时代,那可以忽略不计. 鼠标的流线感还算不错,抓握感适中,但不算小,女士要有心理准备.

Lenovo 公布支持多点触控的 C325 一体机

- xcv58 - Engadget 中国版
市场上支持触控屏幕的 All-in-one 桌面电脑已经不少,只是今天我们又再多一个选择,20 吋的 1,600 x 900 屏幕的 Lenovo C325(最低配备也支持多点触控功能). 它采用双核心 AMD E450 处理器、Radeon HD 6320 显示适配器、备有 8GB RAM、1TB 硬盘及 DVD 刻录机(很可惜不是 Blu-ray)等等.

Ideum公司再推 MT-55 多点触控桌,要价可抵一部车

- weltall - Engadget 中国版
引用来源 | 此文章网址 | 转寄此文章 | 回应.

一体机战局再添新军,东芝 23 寸多点触控 DX735 加入

- martin - Engadget 中国版
超薄笔记本市场已经打得一阵火热,一体机市场也不示弱. 东芝的一体机之前已经有一款,不过这次同样是 23 英寸 1080P 高清屏的 DX735 加入了多点触控功能,外观上则大同小异. 系统跑的是 Windows 7,可选 Core i5 或者 i7 处理器,4GB 的内存,1TB 的硬盘,一个 DVD 光驱,还有 USB 3.0 接口.

Silk 浏览器:Google? No!

- 橙子 - 爱范儿 · Beats of Bits
前苹果员工, Blogger Chris Espinosa 指出, Amazon 的 Silk 浏览器技术,让 Amazon 不能把自己置于 Google 的控制之下. Silk 在云端为用户组织和优化网页,之后再下载到本地. 这样做的结果是, Amazon 能掌握用户在网络上的一举一动. 不仅仅包括在 Amazon.com 下的订单.

浏览器检测

- - JavaScript - Web前端 - ITeye博客
1.navigator 对象. 由于每个浏览器都具有自己独到的扩展, 所以在开发阶段来判断浏览器是一个非常重要的步骤. 虽然浏览器开发商在公共接口方面投入了很多精力, 努力的去支持最常用的公共功能;但在现实中,浏览器之间的差异,以及不同浏览器的“怪癖”却是非常多的,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略.

霸气外露:OmniTouch把任何物体”表面”变成一个多点触控屏(视频+多图)

- 可可 - 36氪
烛光晚餐中,你把女友的手变成一个虚拟键盘,然后亲手为她点下她爱吃的冰激凌. 微软和卡耐基梅隆大学的科学家开发了一个名为OmniTouch的产品,可以把互动界面显示在任何物体的表面,而不仅仅是平面,比如你的手、茶杯等. OmniTouch是一个纯粹的多点触控屏,使用时佩戴在使用者的肩膀上,可以识别3D空间中的有效工作表面.

Galaxy Nexus 使用者回报多点触控失效问题,难怪游戏得分怎样都很低!(影片)

- tossking - Engadget 中国版
尽管硬是要抢在敌人之前开卖,但看来这部 Google 与 Samsung 再次合作的新机,蜜月期好像比想象中的要来的短暂.... 两篇来自 RootzWiki 论坛的文章都把问题指向此装置的多点触控会在「某些情况」下会陷入困境 -- 只要在横向模式执行 Gun Brothers 或 Shadow Gun 等会需要使用到多点触控的 App 时,就会发现画面底部右侧的触控范围会变成要看它心情才能得到触动(掉格.

[原]Android多点触控技术实战,自由地对图片进行缩放和移动

- - guolin的专栏
转载请注明出处: http://blog.csdn.net/guolin_blog/article/details/11100327. 在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的. 因此本篇文章中,我们就来对这一功能进行完善,加入点击图片就能浏览大图的功能,并且在浏览大图的时候还可以通过多点触控的方式对图片进行缩放.