为移动端网页构造快速响应按钮

背景

在谷歌,我们不断地推测手机网页应用的可能性。像HTML5这样的技术使我们网页版的应用以及运行在手机设备上的原生应用。而这些技术的成就之一就是我们开发了一种新的创建按钮的方法,使按钮的响应时间远远快于一般的HTML按钮。在此之前的按钮或者其他响应事件,我们可能会设计一个点击事件。例如:

<button οnclick='signUp()'>Sign Up!</button>
这种方法的问题是,当你开始点击按钮开启点击事件时,浏览器会停留大约300毫秒的时间。这是因为浏览器在等待,看你是否双击按钮。对于大多数的按钮,我们在开发的时候就知道不会执行双击事件,所以点击后等待的这段时间是在浪费用户的时间。我们在Google Voice手机网页应用上第一次使用这种技术,目的是想让用户拨号时有更快的相应速度。

处理触摸事件

这个技术涉及到一点javascript,允许按钮对touchEnd事件响应而不是click事件。touchEnd事件的触发是没有延迟的,所以能够明显的比click事件要快,但是仍有一些问题值得考虑:

1.如果用户轻触了屏幕的某个地方然后引起了一个按钮的touchEnd事件,而我们不应该由此触发一个click事件。

2.如果用户按下了按钮,然后在屏幕上拖动了一段距离,然后引起按钮的touchEnd事件,此时我们也不应该触发click事件。

3.我们希望当用户按下按钮时,能够给这个按钮一个按下的状态,从而使得其突出显示。

我们能够通过监听touchStart和touchMove事件解决前两个问题。如果在按钮上之前有touchStart事件,那么我们才会考虑在按钮上的touchEnd事件。同样,如果有一个touchMove事件且同touchStart的位置相比移动超过了某个阈值,那么我们就不应该把这个touchEnd事件当做click事件来处理。

我们也可以通过给按钮添加一个onclick处理函数来解决第三个问题。那么做会恰好让浏览器于把他当做按钮,而我们的touchEnd处理函数仍能够确保这个按钮响应很快。同样,一个onclick处理函数的存在,也能让那些不支持touch事件的浏览器优雅降级。

消除幽灵点击

重新添加onclick处理函数给按钮,会引发最后一个令人讨厌的问题。但你轻触按钮时,一个click事件仍然会在300ms后被触发。现在这个click处理函数就有被运行两次的危险。这个可以通过在touchStart事件中调用preventDefault 很容易被解决。在touchStart事件中调用preventDefault方法将会阻止当前的轻触所引发的的click和scrolling。我们希望用户可以滚动页面,即使他们从按钮的位置开始滚动,所以我们不认为这是一个可接受的解决方案。我们想出的能解决幽灵点击的方法叫做click buster(点击破坏者)。我们所做的只是在页面body中添加一个click的监听器,在捕获阶段监听。当我们的监听器被触发,我们就会尝试判定这个click事件是不是我们已经当做tap事件来处理的结果。如果是的话,我们就可以调用preventDefault和stopPropagation来阻止他。

(function(){/** * From: http://code.this.com/mobile/articles/fast_buttons.html* Also see: http://stackoverflow.com/questions/6300136/trying-to-implement-googles-fast-button*//** For IE8 and earlier compatibility: https://developer.mozilla.org/en/DOM/element.addEventListener */function addListener(el, type, listener, useCapture){if (el.addEventListener) {el.addEventListener(type, listener, useCapture);return {destroy: function(){el.removeEventListener(type, listener, useCapture);}};}else {var handler = function(e){listener.handleEvent(window.event, listener);}el.attachEvent('on' + type, handler);return {destroy: function(){el.detachEvent('on' + type, handler);}};}}var isTouch = "ontouchstart" in window;/* 构建fastbutton与元素的引用并单击处理程序. */this.FastButton = function(element, handler, useCapture){// 收集功能调用清除事件 this.events = [];this.touchEvents = [];this.element = element;this.handler = handler;this.useCapture = useCapture;if (isTouch) this.events.push(addListener(element, 'touchstart', this, this.useCapture));this.events.push(addListener(element, 'click', this, this.useCapture));};/* 移除事件处理时,不再需要这个按钮 */this.FastButton.prototype.destroy = function(){for (i = this.events.length - 1; i >= 0; i -= 1) this.events[i].destroy();this.events = this.touchEvents = this.element = this.handler = this.fastButton = null;};/* 作为一个事件调度 */this.FastButton.prototype.handleEvent = function(event){switch (event.type) {case 'touchstart':this.onTouchStart(event);break;case 'touchmove':this.onTouchMove(event);break;case 'touchend':this.onClick(event);break;case 'click':this.onClick(event);break;}};/* 保留对touchStart位置的引用,然后开始监听touchMove和touchEnd事件。调用stopPropagation来保证另一个动作不会再次处理同样的点击事件. */this.FastButton.prototype.onTouchStart = function(event){event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);this.touchEvents.push(addListener(this.element, 'touchend', this, this.useCapture));this.touchEvents.push(addListener(document.body, 'touchmove', this, this.useCapture));this.startX = event.touches[0].clientX;this.startY = event.touches[0].clientY;};/* 当一个touchMove事件被触发,检查用户是否推动超过10px这个阈值. */this.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(); //如果ture,然后取消触摸事件
                    }};/*触发一个实际的click处理函数,如果有touchEnd事件,就阻止幽灵点击事件. */this.FastButton.prototype.onClick = function(event){event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);this.reset();// Use .call to call the method so that we have the correct "this": https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/callvar result = this.handler.call(this.element, event);if (event.type == 'touchend') clickbuster.preventGhostClick(this.startX, this.startY);return result;};this.FastButton.prototype.reset = function(){for (i = this.touchEvents.length - 1; i >= 0; i -= 1) this.touchEvents[i].destroy();this.touchEvents = [];};this.clickbuster = function(){}/* 调用preventGhostClick来消除掉所有的在2.5s内且在不超过保留的x,y坐标周围25px的点击事件 */this.clickbuster.preventGhostClick = function(x, y){clickbuster.coordinates.push(x, y);window.setTimeout(clickbuster.pop, 2500);};this.clickbuster.pop = function(){clickbuster.coordinates.splice(0, 2);};/*如果我们 在给定的范围和时间阈值里捕捉到一个click事件,我们调用stopPropagation和preventDefault。调用preventDefault能够阻止链接变为activated状态。 */this.clickbuster.onClick = function(event){for (var i = 0; i < clickbuster.coordinates.length; i += 2) {var x = clickbuster.coordinates[i];var y = clickbuster.coordinates[i + 1];if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);event.preventDefault ? event.preventDefault() : (event.returnValue = false);}}};if (isTouch) {// 不需要使用我们的自定义功能,因为我们只需要触摸设备上点击document.addEventListener('click', clickbuster.onClick, true);clickbuster.coordinates = [];}})(this);window.onload = function(){new FastButton(document.getElementById('id2'), function(){alert('click');});}
View Code

总结

基于这一点,你应该很容易就可以创建快速响应的按钮。通过一些奇特的方式,你能够使这些按钮看起来像是基于你的开发平台的本地按钮一样。已经有一些解决同样问题的移动javascript库可以使用了,但是我们还从未见过任何一个能够提供click事件的优雅降级或者幽灵点击事件的解决方案的js库。我们希望浏览器的开发者们能够在将来的版本中,通过当网站的缩放被禁止(通过使用viewport的meta标签)时,能直接触发click事件的方式解决这个问题。实际上,这已经是姜饼版安卓浏览器要解决的事情了。

英文原文:Creating Fast Buttons for Mobile Web Applications

转载于:https://www.cnblogs.com/niubenbit/p/3623550.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/377182.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Red Gate系列之一 SQL Compare 10.4.8.87 Edition 数据库比较工具 完全破解+使用教程

Red Gate系列之一 SQL Compare 10.4.8.87 Edition 数据库比较工具 完全破解使用教程 Red Gate系列文章&#xff1a; Red Gate系列之一 SQL Compare 10.4.8.87 Edition 数据库比较工具 完全破解使用教程 Red Gate系列之二 SQL Source Control 3.0.13.4214 Edition 数据库版本控制…

《MySQL——基于位点orGTID的主备切换协议》

一主多从的设置&#xff0c;用于读写分离&#xff0c;主库负责所有的写入和一部分读&#xff0c;其他读请求则由从库分担。 一主多从架构下&#xff0c;主库故障后的主备切换问题。相比于一主一备&#xff0c;多了从库指向新主库的过程。 基于位点的主备切换同步 把节点B设…

数据科学和统计学_数据科学中的统计

数据科学和统计学统计 (Statistics) Statistics are utilized to process complex issues in reality with the goal that Data Scientists and Analysts can search for important patterns and changes in Data. In straightforward words, Statistics can be utilized to ge…

java随机数生成(固定位数)

随机生成 a 到 b (不包含b)的整数:(int)(Math.random()*(b-a))a; 随机生成 a 到 b (包含b)的整数:(int)(Math.random()*(b-a1))a;转载于:https://www.cnblogs.com/zhwl/p/3624726.html

POJ 3670 Eating Together

POJ_3670 由于递增和递减是类似的&#xff0c;下面不妨只讨论变成递增序列的情况。 由于Di只有三个数&#xff0c;所以可以考虑将序列分割成三部分&#xff0c;第一部分全部变成1&#xff0c;第二部分全部变成2&#xff0c;第三部分全部变成3。然后我们枚举3开始的位置&#xf…

《MySQL——如何解决一主多从的读写分离的过期读问题》

目录两种架构两种架构特点强制走主库方案Sleep方案判断主备无延迟方案配合semi-sync等主库位点方案GTID方案两种架构 基于一主多从的读写分离&#xff0c;如何处理主备延迟导致的读写分离问题。 读写分离的主要目标&#xff1a;分摊主库压力。 有两种架构&#xff1a; 1、客…

json/ 发送形式_24/7的完整形式是什么?

json/ 发送形式24/7&#xff1a;二十四 (24/7: Twenty-Four Seven) 24/7 or 24-7 service, which generally marked "twenty-four seven" is service that is existing at any time and typically, every day in trade business and industry. Substitute orthograph…

《MySQL tips:并发查询与并发连接区别》

并发连接与并发查询&#xff0c;并不是一个概念。 在执行show processlist的结果里&#xff0c;看到了几千个连接&#xff0c;指的是并发连接。 而"当前正在执行"的语句&#xff0c;才是并发查询。 并发连接数多影响的是内存。 并发查询太高对CPU不利。一个机器的…

对上拉下拉电阻的作用作个总结(想了解的过来看看)(转载)

转自&#xff1a;http://www.amobbs.com/thread-5475279-1-3.html 一、定义&#xff1a;上拉就是将不确定的信号通过一个电阻嵌位在高电平&#xff01;电阻同时起限流作用&#xff01;下拉同理&#xff01;上拉是对器件注入电流&#xff0c;下拉是输出电流&#xff1b;弱强只是…

给用户传入的变量进行转义操作

先看代码实现&#xff1a; /* 对用户传入的变量进行转义操作。*/ if (!get_magic_quotes_gpc()) {if (!empty($_GET)){$_GET addslashes_deep($_GET);}if (!empty($_POST)){$_POST addslashes_deep($_POST);}$_COOKIE addslashes_deep($_COOKIE);$_REQUEST addslashes_…

《MySQL——外部检测与内部统计 判断 主库是否出现问题》

目录select1判断查表判断更新判断外部检测弊端内部统计一主一备的双M架构里&#xff0c;主备切换只需要把客户端流量切换到备库。 在一主多从的架构里&#xff0c;主备切换要把客户端流量切换到备库&#xff0c;也需要把从库接到新主库上。 切换有两种场景&#xff1a;1、主动…

NIM的完整形式是什么?

NIM&#xff1a;无内部消息 (NIM: No Internal Message) NIM is an abbreviation of "No Internal Message". NIM是“无内部消息”的缩写。 It is an expression, which is commonly used in the Gmail platform. It is written in the subject of the mail, if the…

[Json] C#ConvertJson|List转成Json|对象|集合|DataSet|DataTable|DataReader转成Json (转载)...

点击下载 ConvertJson.rar 本类实现了 C#ConvertJson|List转成Json|对象|集合|DataSet|DataTable|DataReader转成Json|等功能大家先预览一下 请看代码 /// <summary> /// 类说明&#xff1a;Assistant /// 编 码 人&#xff1a;苏飞 /// 联系方式&#xff1a;361983679 …

let 只能在严格模式下吗_LET的完整形式是什么?

let 只能在严格模式下吗LET&#xff1a;今天早早离开 (LET: Leaving Early Today) LET is an abbreviation of "Leaving Early Today". LET是“ Leaveing Today Today”的缩写 。 It is an expression, which is commonly used in the Gmail platform. It is writt…

js 遮罩层 loading 效果

//调用方法 //关闭事件<button οnclickLayerHide()>关闭</button>&#xff0c;在loadDiv(text)中&#xff0c;剔除出来 //调用LayerShow(text)&#xff0c;text为参数&#xff0c;可以写入想要写入的提示语 //本方法在调用时会自动生成一个添加到body的div&#x…

centos6.5安装配置LDAP服务[转]

centos6.5安装配置LDAP服务[转] 安装之前查一下 1find / -name openldap*centos6.4默认安装了LDAP&#xff0c;但没有装ldap-server和ldap-client 于是yum安装 1su root2yum install -y openldap openldap-servers openldap-clients不建议编译源码包&#xff0c;有依赖比较麻烦…

《MySQL——恢复数据-误删行、表、库》

目录误删行事前预防误删行数据方法误删表/库延迟复制备库事前预防误删库/表方法传统的架构不能预防误删数据&#xff0c;因为主库的一个drop table命令&#xff0c;会通过binlog传给所有从库和级联从库&#xff0c;进而导致整个集群的实例都会执行这个命令。 MySQL相关的误删除…

python图例位置_Python | 图例位置

python图例位置Legends are one of the key components of data visualization and plotting. Matplotlib can automatically define a position for a legend in addition to this, it allows us to locate it in our required positions. Following is the list of locations…

Freemarker中遍历List实例

Freemarker中如何遍历List摘要&#xff1a;在Freemarker应用中经常会遍历List获取需要的数据&#xff0c;并对需要的数据进行排序加工后呈现给用户。那么在Freemarker中如何遍历List&#xff0c;并对List中数据进行适当的排序呢&#xff1f;通过下文的介绍&#xff0c;相信您一…

工作总结:文件对话框的分类(C++)

原文地址&#xff1a;http://www.jizhuomi.com/software/173.html 文件对话框分为打开文件对话框和保存文件对话框&#xff0c;相信大家在Windows系统中经常见到这两种文件对话框。例如&#xff0c;很多编辑软件像记事本等都有“打开”选项&#xff0c;选择“打开”后会弹出一个…