Hammer.js源碼解析(1) - 整體架構(gòu)

source 發(fā)布于2019-08-22 15:14 / 2228人閱讀

摘要：一直以來都想著去詳細了解手勢事件相關(guān)的東西，又因為一直以來使用的都是，所以想著通過閱讀的源碼來學(xué)習手勢的相關(guān)知識。

一直以來都想著去詳細了解手勢事件相關(guān)的東西，又因為一直以來使用的都是Hammer.js，所以想著通過閱讀Hammer.js的源碼來學(xué)習手勢的相關(guān)知識。

首先，我們來看Hammer.js的整體架構(gòu)(Hammer.js的版本都是2.0.8)

我們來看，Hammer.js的初始化的流程圖

var myElement = document.getElementById("hitarea");
var mc = new Hammer(myElement);

Hammer.js中需要理解的核心：

manager，是整個Hammer.js的管理者，維系Hammer.js中各個模塊

需要添加必須的css，在 new TouchAction() 和 toggleCssProps()兩個方法中設(shè)置

創(chuàng)建當前的Input事件(監(jiān)聽手勢的事件，如Touch, Pointer, Mouse等)以及對這些方法的處理

手勢的檢測和觸發(fā)，都包含的 Recognizer 的方法之中

GPU云服務(wù)器云服務(wù)器 hammer.js cdn webrtc 源碼架構(gòu) 源碼解析 webrtc源碼解析

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/93300.html

相關(guān)文章

Hammer.js源碼簡析

摘要：最后一點思考都是在冒泡階段綁定事件處理器，為什么不在捕獲階段攔截事件尼，如果一個向右活動的手勢被識別，后續(xù)的事件如已經(jīng)沒必要再傳給子節(jié)點，完全可以在攔截的元素上處理，這樣性能上也應(yīng)該會有一點提升，挖個坑給自己以后實現(xiàn)一下。開始話說上周周末閑的蛋疼，突然想了解一下前端手勢如何處理，好解開自己一個知識盲點，于是開始啃源碼。。。并紀錄一下。一個手勢在我們的前端頁面里面復(fù)雜的手勢應(yīng)該是...

lushan 2019-08-20 15:53 評論0 收藏0
開發(fā)者必備的 12 個 JavaScript 庫

摘要：有了這些工具，開發(fā)者們就能專注于創(chuàng)意設(shè)計了，而不用為某個功能而花費太多精力。這里我們介紹的是個開發(fā)者們必備的庫，都是一些很基礎(chǔ)功能很強大的庫?？赏ㄟ^來獲取當前顯示的頁號，并提供選項來定制默認頁號加速器陰影和延時。現(xiàn)在 web 設(shè)計是最有趣的了，做好 web 設(shè)計不僅要熟練使用 Javascript，css 和 html 等，還要有自己的創(chuàng)意設(shè)計。為了方便大家發(fā)揮自己的創(chuàng)意，就產(chǎn)生...

muddyway 2019-08-21 12:10 評論0 收藏0
Vue.js資源分享

摘要：中文官網(wǎng)英文官網(wǎng)組織發(fā)出一個問題之后，不要暫時的離開電腦，如果沒有把握先不要提問。珍惜每一次提問，感恩每一次反饋，每個人工作還是業(yè)余之外抽出的時間有限，充分準備好應(yīng)有的資源之后再發(fā)問，有利于問題能夠高效質(zhì)量地得到解決。 Vue.js資源分享更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/maid...

vpants 2019-08-20 14:21 評論0 收藏0
javascript框架學(xué)習計劃

摘要：前言終于要做這個計劃了，前端框架千千萬，絕不能一頭扎進去盲目開始，本片文章總結(jié)一下目前前各種端框架，以及它們的用途主要解決什么問題，然后最后做出學(xué)習計劃。希望入了前端坑的同學(xué)們可以有所幫助。但是庫與框架很難嚴格區(qū)分，所以統(tǒng)一稱為解決方案。前言：終于要做這個計劃了，前端框架千千萬，絕不能一頭扎進去盲目開始，本片文章總結(jié)一下目前前各種端框架，以及它們的用途主要解決什么問題，然后最后做出學(xué)...

airborne007 2019-08-19 18:43 評論0 收藏0
[譯] 在 Angular 中使用 HammerJS (觸摸手勢)

摘要：是一個為應(yīng)用添加觸摸手勢的非常受歡迎的庫文中將看到結(jié)合一起使用是多么的簡單原文示例是針對版本經(jīng)過測試在目前最新的版本中此教程依然適用文章將以來統(tǒng)一代稱版本名詞滑動和類似但滑動更快速無粘滯左滑右滑上滑下滑頭像輪播簡介我們將構(gòu)建一個頭像輪播可以 HammerJS 是一個為 web 應(yīng)用添加觸摸手勢的非常受歡迎的庫,文中,將看到 Angular 結(jié)合 HammerJS 一起使用是多么的簡單 ...

lifesimple 2019-08-20 17:29 評論0 收藏0