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

　　对于移动上网人口节节高升的趋势，许多网站也推出了移动版网站，或是利用ResponsiveWebDesign（自适应网页设计）来增进网站在移动设备上的体验。在2013年的今天，网页开发者利用CSSmediaquery在不同尺寸来达到不同的排版已经是基本工，但是关于自适应网页设计还有更多的细节等着设计师与开发者去改善，例如利用Lettering。让字体大小也能随着设备大小而变动，或是利用Retina。让高像素密度（ppi）较高的移动设备，可以欣赏到高分辨率的图片。
　　300毫秒时间差
　　这次要提到的是网页在移动设备上触摸（touch）与点击（click）的不同之处，在W3C草案中touch共有touchstart、touchend、touchmove、touchcancel，在GoolgeIO2013中MobileHTML：TheFutureofYourS这个议程中，从22分10秒的地方开始，有针对touchstart、touchend、touchmove这三个事件做了一个Demo，同时也演示了touchstart与click事件（event）之间有300毫秒（ms）的差异。
　　300毫秒的时间差，看起来很短，但是却会让使用者一直处在到底按到了没有的疑问之中。因为在移动设备中，我们不仅有点击（click）的事件，我们还有点击两下（doubleclick）放大、捲动（scroll）等指令，300毫秒延迟的设定系为了侦测其他事件而存在的。
　　一个往下捲动的动作，里面也包含了触摸事件
　　在GoogleIO的演示当中，touchend有60毫秒、click有300毫秒的时间差
　　要知道这300毫秒的影响有多大，我们直接拿起手机，进入台湾最多人设为首页的Yahoo奇摩移动版网站。在浏览网站时，因为在点击超连结时也需要等待一个有点久的时间，所以使用者不容易发现300毫秒的时间差，不过今天如果是一个选单按钮呢？
　　我们点击左上角选单按钮，感受一下选单打开变成右边的样子。嗯～似乎感受到有些延迟，虽然有没办法慢慢去挖出程式码去证明这个按钮是点击事件，不过应该八九不离十了。不过并不是Yahoo里面所有按钮都是点击事件，我们点击新闻分类，切换到该页面去。
　　再点击一次左上角选单按钮，咦～是不是感觉变快了，这是因为该按钮的事件应该是用touchend的事件去做触发，我们来做个小实验，我们像下图一样手指的起点从选单按钮开始，然后再萤幕上乱画一通，最后再其他地方放开，选单一样会打开，这个行为就可以确定是使用了touchend事件。使用touch事件在移动设备上是不是有更好的体验了呢！
　　点击下去的那瞬间的细节
　　避免300毫秒的时间差，并没有解决所有的问题，在以往的网页设计上，我们可能只会去处理到hover的效果，不过在触控设备上，hover的效果却没有办法好好发挥，我们需要借助touchstart事件来做出点击的效果。在F也订出按钮需要有閒置（idle）、下压（press）、关闭（disabled）几种状态。
　　在先前Yahoo的案例里，虽然有300毫秒的延迟，但是我们却没有到底有没有点到的窘境，仔细观察一下，就会发现在点击选单按钮时，在touchstart事件时皆有不同的效果，因此我们才会知道，原来我们有点击到，然后再感受到跳出选单的时间有延迟。
　　Yahoo移动版网站中，选单按钮都有点击瞬间的视觉效果
　　自适应网页实作
　　不过当网页里面使用触摸事件时，用鼠标点击想当然是没有效果，但是如果把触摸与点击事件同时用上时，在移动设备上又会造成重复的点击。在这边可以利用Modernizr在网页中加载modernizr。js，当网页开启后开启浏览器的开发者工具，我们发现在html标签里，增加了好多个class其中notouch，就表示这个设备不支持触摸，如果支持触摸就有touch这个class。
　　html标签中有notouch这个class表示该设备不支持触控