尤川豪   ·  4年前
445 貼文  ·  275 留言

Swipe 如何實作「手機 browser 上偵測 swipe」?

https://github.com/thebird/swipe/

source code 也不長,就五百多行

https://github.com/thebird/Swipe/blob/master/swipe.js

發現 browser 本來就有觸碰相關事件

https://developer.mozilla.org/zh-TW/docs/Web/API/Touch_events

function startup() {
  var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchmove", handleMove, false);
  log("initialized.");
}

為了支援基於觸碰的使用者介面,觸控事件提供了解釋手指或觸控筆於觸控螢幕或觸控板上活動的資訊。

觸控事件介面為相對低階的 API,可用來支援應用程式特定的多點觸控互動,例如兩指手勢。多點觸控互動起始於手指或觸控筆於平面的第一個觸碰,其它的手指可能於其後伴隨著移動才觸碰到平面。而互動則結束於手指自觸控平面離開。在此互動期間,應用程式會於開始、移動以及結束的階段接收到觸控事件。

觸控事件類似於滑鼠事件,但觸控事件支援同時間多個觸碰及其於觸控平面的每個不同點位置。TouchEvent 介面封裝了所有當前作用中的觸碰點。Touch 介面則表示個別的觸碰點,包括了如觸碰點於瀏覽器 viewport 中的相對位置資訊。

  分享   共 1,118 次點閱
按了喜歡:
共有 0 則留言
還沒有人留言。歡迎分享您的觀點、或是疑問。
您的留言
尤川豪
445 貼文  ·  275 留言

Devs.tw 是讓工程師寫筆記、網誌的平台。隨手紀錄、寫作,方便日後搜尋!

歡迎您一起加入寫作與分享的行列!

查看所有文章