Mobile Web 前端技術筆記(五): 觸控事件與滑鼠事件大不同

我一直想搞清楚手機的事件,quirks mode的iPhone events這篇文章有很好的解說。作者的中心概念是,觸控裝置與滑鼠的事件模型完全不同,互相比擬不是個好想法。就連蘋果官方的Safari Web Content Guide for iPhone也含糊其辭,堪稱有最爛說明文件的最好產品。

根據作者的測試,觸控裝置的實際情形是:

  1. 手指單點時,觸發mouseover, mousemove, mousedown, mouseup 和 click events,也將套用CSS的:hover樣式
    (而且你可以為這些事件加上event handler)
  2. 當user focus離開某元件,觸發mouseout event, 並移除:hover樣式

我們最常利用的mousedown/mouseup/click或mouseenter/mouseout/mousemove事件,和:hover樣式,在觸控裝置上都不能以桌機的概念來看。不同之處在於:

  1. 手指滑動(touch event)和連點兩下(double tapping)都被保留為系統事件,所以在瀏覽器裡並不會被解讀成mousemove或double click
  2. 桌機mouse的移動是連續的,游標一直存在於畫面上;但手機上是不連續的,手指可能在一處點擊,中途消失,然後又點了另一處。

進一步解釋,在桌機上一個滑鼠點擊可被看成三位一體的mousedown/mouseup/click,但在手機上未必會被分解成三個動作。又手指的移動被看作是不連續的,你不能像桌機一樣,在一處按下滑鼠,拖曳到另一處放開,這在手機會被解讀成touch event,而不是mousemove;許多手機browser對mouseover動作根本無動於衷,mousemove也不具意義。既然手機沒有如此多樣的互動,套用傳統的滑鼠事件來解釋觸控行為並不適當,我們也無需再企圖操控手指移動的事件了。

作者提出了一個新觀念: User focus/de-focus,在手機上只有這兩種情況。舉個明顯的例子,填表單時,把手指停在一個欄位上編輯就是focus,移到別的欄位就是de-focus。說穿了,利用“click”事件來引發動作是最好的方法,因為所有系統都支援click,click毫無疑問的是使用者確認的信號,利用click引發動作的application也將成為未來的主流。

而mouse雙擊和mouse右鍵event就不用談了,雙擊是iphone的系統事件(zoom),而由右鍵觸發contextmenu這種互動在iphone上根本不存在。

《資料來源》

作者還把幾種桌機和手機瀏覽器的測試結果整理成表,可作為寫javascript的參考:

Touch Table :各大手機系統支援的event整理

Event compatibility tables :用javascript的event如change、click來列表,看各大桌機和手機瀏覽器的支援度

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s