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

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

摘要：一直以來(lái)都想著去詳細(xì)了解手勢(shì)事件相關(guān)的東西，又因?yàn)橐恢币詠?lái)使用的都是，所以想著通過(guò)閱讀的源碼來(lái)學(xué)習(xí)手勢(shì)的相關(guān)知識(shí)。

一直以來(lái)都想著去詳細(xì)了解手勢(shì)事件相關(guān)的東西，又因?yàn)橐恢币詠?lái)使用的都是Hammer.js，所以想著通過(guò)閱讀Hammer.js的源碼來(lái)學(xué)習(xí)手勢(shì)的相關(guān)知識(shí)。

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

我們來(lái)看，Hammer.js的初始化的流程圖

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93300.html

相關(guān)文章

Hammer.js源碼簡(jiǎn)析

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

lushan 2019-08-20 15:53 評(píng)論0 收藏0
開(kāi)發(fā)者必備的 12 個(gè) JavaScript 庫(kù)

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

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

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

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

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

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

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

lifesimple 2019-08-20 17:29 評(píng)論0 收藏0