瞬间的细节：触摸与点击的不同

小提示：您能找到这篇{瞬间的细节：触摸与点击的不同}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的瞬间的细节：触摸与点击的不同内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

对于移动上网人口节节高升的趋势，许多网站也推出了移动版网站，或是利用 Responsive Web Design （自适应网页设计）来增进网站在移动设备上的体验。在 2013 年的今天，网页开发者利用 CSS media query 在不同尺寸来达到不同的排版已经是基本工，但是关于『自适应网页设计』还有更多的细节等着设计师与开发者去改善，例如利用Lettering.js让字体大小也能随着设备大小而变动，或是利用Retina.js让高像素密度（ppi）较高的移动设备，可以欣赏到高分辨率的图片。

300 毫秒时间差

这次要提到的是网页在移动设备上触摸（touch）与点击（click）的不同之处，在W3C 草案中 touch 共有 touchstart、touchend、touchmove、touchcancel，在 Goolge IO 2013 中Mobile HTML : The Future of Your Sites这个议程中，从 22 分 10 秒的地方开始，有针对 touchstart、touchend、touchmove 这三个事件做了一个 Demo，同时也演示了 touchstart 与 click 事件（event）之间有 300 毫秒（ms）的差异。

300 毫秒的时间差，看起来很短，但是却会让使用者一直处在『到底按到了没有』的疑问之中。因为在移动设备中，我们不仅有点击（click）的事件，我们还有点击两下（double click）放大、捲动（scroll）等指令，300 毫秒延迟的设定系为了侦测其他事件而存在的。

▲ 一个往下捲动的动作，里面也包含了触摸事件

▲ 在 Google IO 的演示当中，touchend 有 60 毫秒、click 有 300 毫秒的时间差

要知道这 300 毫秒的影响有多大，我们直接拿起手机，进入某个小岛最多人设为首页的 Yahoo 奇摩 移动版网站。在浏览网站时，因为在点哈尔滨小红书种草笔记都有击超连结时也需要等待一个有点久的时间，所以使用者不容易发现 300 毫秒的时间差，不过今天如果是欧莱雅男士 宣传推广一个选单按钮呢？

我们点击左上角选单按钮，感受一下选单打开变成右边的样子。嗯～似乎感受到有些延迟，虽然有没办法慢慢去挖出程式码去证明这个按钮是点击事件，不过应该八九不离十了。不过并不是 Yahoo 里面所有按钮都是点击事件，我们点击新闻分类，切换到该页面去。

再点击一次左上角选单按钮，咦～是不是感觉变快了，这是因为该按钮的事件应该是用 touchend 的事件去做触发，我们来做个小实验，我们像下图一样手指的起点从选单按钮开始，然后再萤幕上乱画一通，最后再其他地方放开，选单一样会打开，这个行为就可以确定是使用了 touchend 事件。使用 touch 事件在移动设备上是不是有更好的体验了呢！

点击下去的那瞬间的细节

避免 300 毫秒的时间差，并没有解决所有的问题，在以往的网页设计上，我们可能只会去处理到 hover 的效果，不过在触控设备上，hover 的效果却没有办法好好发挥重庆抖音变现团队，我们需要借助 touchstart 事件来做出点击的效果。在也订出按钮需要有 閒置（idle）、下压（press）、关闭（disabled）几种状态。

在先前 Yahoo 的案例里，虽然有 300 毫秒的延迟，但是我们却没有『到底有没有点到』的窘境，仔细观察一下，就会发现在点击选单按钮时，在 touchstart 事件时皆有不同的效果，因此我们才会知道，原来我们有点击到，然后再感受到跳出选单的时间有延迟。

▲ Yahoo 移动版网站中，选单按钮都有点击瞬间的视觉效果

自适应网页实作

不过当网页里面使用触摸事件时，用鼠标点击想当然是没有效果，但是如果把触摸与点击事件同时用上时，在移动设备上又会造成重复的点击。在这边可以利用 Modernizr 在网页中加载 modernizr.js，当网页开启后开启浏览器的开发者工具，我们发现在 html 标签里，增加了好多个 class 其中 no-touch，就表示这个设备不支持触摸，如果支持触摸就有 touch 这个 class。

▲ html 标签中有 no-touch 这个 class 表示该设备不支持触控

▲ html 标签中有 touch 这个 class 表示该设备支持触控

这样一来我们就可以容易的判断设备是否支持触摸，在利用 javascript 去控制该用点击还是触摸事件了喔。

via：盒子UI