为移动Web应用创建快速响应按钮

英文原文出自 Google Deveploers《Creating Fast Buttons for Mobile Web Applications》，由XiaoYi_HD翻译，并首发于 EsoftMobile.com。如需转载，请注明译者及出处信息。

背景

在 Google，我们不断地突破移动 Web 应用能够达到的效果，类似于 HTML5 这类技术让我们对原生应用和 Web 应用的界线开始变得模糊。为了这个目标，我们开发了一种新技术让纯 HTML 按钮能够有更快的响应速度。这之前，我们可能只是为按钮或者其他可以点击的元素增加点击处理，如：

 

<button onclick='signUp()'>Sign Up!</button>

使用这种方法存在一个问题就是，移动浏览器会在你点击按钮后 300ms 才触发事件，原因是浏览器需要区分你是否是要执行双击。但是对于大多数按钮，我们并不需要它处理双击事件，所以 300ms 的延时时间对于只是想执行点击事件的用户来说太长了。我们最早开发这种技术是在Google Voice mobile web app中，我们希望能够更加迅速的调用拨号事件。

 

处理触摸事件

该技术涉及一点 JavaScript 的东西来让按钮响应触摸（Touch）事件而不是点击（Click）事件。触摸事件响应不会有延时所以感受会比点击事件快很多，但是我们也需要考虑以下几个问题：

1. 如果用户是点击屏幕上其他的元素而触发了按钮的触摸事件，这种情况我们不应该去执行按钮的事件。
2. 如果用户按下按钮然后拖到屏幕其他位置而触发了触摸事件，我们也不应该执行按钮的事件。
3. 我们希望按钮在按下的时间能够高亮来表示点击状态。

我们能够通过检测 touchstart 和 touchmove 事件来解决前两个问题，只需要考虑一个一开始在按钮上就是 touchstart 状态的触摸事件，而如果 touchstart 后存在了一个 touchmove，那我们就不应该处理 touchend 事件。

我们可以通过同时给按钮添加 onclick 处理来解决第三个问题，这样浏览器就会把它当成按钮并在点击时出现高亮。我们 touchend 处理也能保证按钮仍然很快响应，同时添加 onclick 可以在不支持触摸事件的浏览器上做为比较可靠的备用方案。

破坏讨厌的点击

在添加触摸事件的同时添加 onclick 事件又会带来另一个讨厌的问题，当你点击按钮时，点击 (click) 事件仍然会在 300ms 后执行，我们可以通过在 touchstart 事件里调用 preventDefault 来解决。在 touchstart 中调用 preventDefault 方法会会导致点击和滑动失效，但我们又想用户能够滑动视图即使一开始是点在按钮上，所以我们仍不能接受这种解决方案。接来下我们想出了一个被我们叫做点击破坏者（Click buster）的方案，我们给 body 添加一个点击事件监听（listener），当监听事件被触发，我们会区分点击是否由我们已经处理的 tap 事件导致的，如果这样，我们才调用 preventDefault 和 stopPropagation。

Fast Button Code

下面我们会提供一些我们实现这个想法的代码。

通过标签和事件创建一个 FastButton

 

google.ui.FastButton = function(element, handler) {
	this.element = element;
	this.handler = handler;
	
	element.addEventListener('touchstart', this, false);
	element.addEventListener('click', this, false);
};

google.ui.FastButton.prototype.handleEvent = function(event) {
	switch(event.type) {
		case 'touchstart': this.onTouchStart(event); break;
		case 'touchmove': this.onTouchMove(event); break;
		case 'touchend': this.onTouchEnd(event); break;
		case 'click': this.onClick(event); break;
	}
};

保存 touchstart 坐标，并开始监听 touchmove 和 touchend 事件，调用 stopPropagation 来保证其他操作不会触发点击事件。

 

 

google.ui.FastButton.prototype.onTouchStart = function(event) {
	event.stopPropagation();
	
	this.element.addEventListener('touchend', this, false);
	document.body.element.addEventListener('touchmove', this, false);
	
	this.startX = event.touches[0].clientX;
	this.startY = event.touches[0].clientY;
};

当 touchmove 事件触发时，检查用户是否拖动超过 10px。

 

 

google.ui.FastButton.prototype.onTouchMove = function(event) {
	if (Math.abs(event.touches[0].clientX - this.startX) > 10 ||
		Math.abs(event.touches[0].clientY - this.startY) > 10) {
		this.reset();	
	}
};

执行真正的点击事件并在 touchend 事件时避免讨厌的 click。

 

 

google.ui.FastButton.prototype.onClick = function(event) {
	event.stopPropagation();
	this.reset();
	this.handler(event);
	
	if (event.type == 'touchend') {
		google.clickbuster.preventGhostClick(this.startX, this.startY);
	}
};

google.ui.FastButton.prototype.reset = function() {
	this.element.removeEventListener('touchend', this, false);
	document.body.removeEventListener('touchmove', this, false);
}

调用 preventGhostClick 来破坏在接下来 2.5s 内 x, 移动距离在 25px 内的点击事件。

 

 

google.clickbuster.preventGhostClick = function(x, y) {
	google.clickbuster.coordinates.push(x ,y);
	window.setTimeout(google.clickbuster.pop, 2500);
};

google.clickbuster.pop = function() {
	google.clickbuster.coordinates.splice(0, 2);
};

如果我们在给定的半径和时间内捕获到了点击事件，调用 stopPropagation 和 preventDefault。

 

 

google.clickbuster.onClick = function(event) {
	for (var i = 0; i < google.clickbuster.coordinates.length; i += 2) {
		var x = google.clickbuster.coordinates[i];
		var y = google.clickbuster.coordinates[i + 1];
		if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
		event.stopPropagation();
		event.preventDefault();
		}
	}
};

document.addEventListener('click', google.clickbuster.onClick, true);
google.clickbuster.coordinates = [];

 

总结

到这里你应该能够创建快速响应的按钮了，花一点心思，你可以让它们看起来更像你所面向平台的原生按钮。现在已经有一些 JavaScript 库也提供了这种问题的解决方案，但是到目前为止我们没有发现有提供可靠备选方案和讨厌的点击问题。我们希望浏览器开发者能够在能够解决在不能缩放的页面上快速响应的问题，事实上我们已经在 Gingerbread 的浏览器上实现了。

测试代码FastButtonDemo已上传 github。

Posted by XiaoYi_HD - 6月 27 2013
如需转载，请注明： 本文来自 Esoft Mobile