尤川豪   ·  1月前
Exp. 1,708  ·  223 貼文  ·  153 留言

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 中的相對位置資訊。

  分享   共 73 次點閱
共有 0 則留言
您的留言
尤川豪
Exp. 1,708  ·  223 貼文  ·  153 留言

關於作者

Devs.tw 作者,喜歡分享&建造新東西的工程師。

歡迎在 Facebook 追蹤我!不定期分享有趣技術文章!

  查看個人檔案