在那瞬間的細節：觸碰與點擊的不同，300 毫秒時間差

對於行動上網人口節節高升的趨勢，許多網站也推出了行動版網站，或是利用 Responsive Web Design （自適應網頁設計）來增進網站在行動裝置上的體驗。但如何有效區別觸碰（touch）與點擊（click）的不同之處呢？

在 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 事件來做出點擊的效果。在 Firefox style guide 也訂出按鈕需要有閒置（idle）、下壓（press）、關閉（disabled）幾種狀態。

在先前 Yahoo 的案例裡，雖然有 300 毫秒的延遲，但是我們卻沒有『到底有沒有點到』的窘境，仔細觀察一下，就會發現在點擊選單按鈕時，在 touchstart 事件時皆有不同的效果，因此我們才會知道，原來我們有點擊到，然後再感受到跳出選單的時間有延遲。

▲Yahoo行動版網站中，選單按鈕都有點擊瞬間的視覺效果。

自適應網頁實作

不過當網頁裡面使用觸碰事件時，用滑鼠點擊想當然是沒有效果，但是如果把觸碰與點擊事件同時用上時，在行動裝置上又會造成重複的點擊。在這邊可以利用 Modernizr 在網頁中載入 modernizr.js，當網頁開啟後開啟瀏覽器的開發者工具，我們發現在 html 標籤裡，增加了好多個 class 其中 no-touch，就表示這個裝置不支援觸碰，如果支援觸碰就有 touch 這個 class。