現(xiàn)在移動(dòng)端這么普及呢，我們?cè)谑謾C(jī)上可以操作更多了。對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)實(shí)現(xiàn)一些豐富的操作感覺(jué)也是非常有必要的，對(duì)吧(如果你僅僅需要click，，那就當(dāng)我沒(méi)說(shuō)咯。。。)~~比如實(shí)現(xiàn)上下，左右滑動(dòng)，點(diǎn)擊之類的，加上這些東西就感覺(jué)網(wǎng)頁(yè)會(huì)庫(kù)不少呢~~(舒服)。當(dāng)然啦。原生javascript并沒(méi)有為我們提供這些花里胡哨的東西，需要我們自己去實(shí)現(xiàn)下嘍。又當(dāng)然，，現(xiàn)在還是有許多js手勢(shì)庫(kù)的,比如hammer.js之類的。但是，學(xué)習(xí)是一個(gè)重復(fù)造輪子的過(guò)程（不知道那位偉人所多，如果無(wú)人認(rèn)領(lǐng)，那就是我說(shuō)的~~~~~~~~~）對(duì)吧。自己造個(gè)輪子玩，可能不能用在跑車上，但或許用在拖拉機(jī)上不錯(cuò)也說(shuō)不定嘍.

　　好啦，好啦，前戲就這么多。下面就是主題啦。。說(shuō)說(shuō)實(shí)現(xiàn)一個(gè)自己的手勢(shì)庫(kù)。我把它叫做base-gesture.js 傳送門在次:gesture(GitHub。。。star一下可好)

　　然后嘞，講講思路嘍。（僅僅是我個(gè)人的想法。。不做任何保證，也不負(fù)責(zé)。打我呀~）一個(gè)小起點(diǎn)，在移動(dòng)端呢，如果使用click會(huì)有個(gè)300ms延遲，原因是移動(dòng)端需要一個(gè)雙擊放大的判斷，所以導(dǎo)致這個(gè)問(wèn)題，具體點(diǎn)可以自己gooole或百度.為了避免這個(gè)問(wèn)題我們就需要對(duì)touchstart，touchend這兩個(gè)事件進(jìn)行監(jiān)聽(tīng)，已實(shí)現(xiàn)一個(gè)tap事件。然后你有非常好學(xué)，去百度了下，發(fā)現(xiàn)它們還有一個(gè)touchmove兄弟事件存在。。在我看來(lái)這三兄弟和mousedown,mouseup,mousemove賊像，那我們就可以利用這三個(gè)事件來(lái)實(shí)現(xiàn)一些基本的手勢(shì)操作了。我實(shí)現(xiàn)呢。主要是在touchstart得時(shí)候記錄一個(gè)startX,和一個(gè)startY就是起始位置啦。然后在touchmove時(shí)候在記錄一個(gè)endX和一個(gè)ewndY。現(xiàn)在我們有兩個(gè)點(diǎn)的坐標(biāo)了哦。那就好說(shuō)了，稍微運(yùn)用下數(shù)學(xué)知識(shí)求下兩點(diǎn)之間的夾角，有這個(gè)夾角了，你在判斷下endX-startX以及endY-startY的正負(fù)你就可以基本實(shí)現(xiàn)了判斷上，下左右滑動(dòng)了哦~~還行吧

　　當(dāng)然，有這些還是不夠的，我們知道，（你必須知道）touchstart只在按下屏幕那一刻觸發(fā)，這就導(dǎo)致startX與startY只要手指不松開(kāi)，它就不會(huì)變，而這個(gè)直接導(dǎo)致的問(wèn)題就是，你左劃后再繼續(xù)右劃，之前的判斷方法依然判斷為左劃，，直到到你右劃過(guò)了起始點(diǎn)。哇，這個(gè)問(wèn)題就很尷尬了。。簡(jiǎn)直是廢的嘍。這就需要解決下嘍。我呢，決定多加幾個(gè)參數(shù)輔助下嘍，第一組就是compareX和compareY他們?cè)趖ouchstart時(shí)候初始化和startx和starty值一樣嘍，需要他們呢主要是不希望startX和startY值不要變(后面還有用)，他們就替代去完成一些任務(wù)，在touchmove可能就會(huì)更新它們的值(中途方向改變的時(shí)候)。然后就是兩個(gè)數(shù)組了,gatherX以及gatherY。他們的第一位保存的是上一次觸發(fā)touchmove時(shí)候記錄的endX/Y-compareX/Y的值，第二位保存的是當(dāng)前endX/Y-compareX/Y的值，這個(gè)時(shí)候我們就要判斷gatherX/Y[1]-gatherX/Y的時(shí)候大小了，如果它小于零，恭喜你，它方向改變了(不知道有沒(méi)有講清楚，大概意識(shí)就是你從家里出去一直向外走了100米記錄保存在gatherX/Y第一位上，下一秒這個(gè)距離變成94米了，保存在第二位上，一減小于零，說(shuō)明你回頭走了呀)。這個(gè)時(shí)候，把compareX/Y等于endX/endY表示一個(gè)新的手勢(shì)的起點(diǎn)，然后gatherX/gatherY清空，這樣就基本實(shí)現(xiàn)了，就算它中途非常手賤的不停移動(dòng)，也沒(méi)問(wèn)題，也能觸發(fā)正確對(duì)應(yīng)事件。

　　基本的框架能思路就是這樣了，他至少能判斷上下左右滑動(dòng)了。當(dāng)然為了讓它實(shí)用一點(diǎn)我為event加了兩個(gè)屬性,event.gapX/Y表示距離上一次觸發(fā)touchmove在X/Y軸上滑動(dòng)的距離，以及evnt.moveX/Y表示手勢(shì)結(jié)束到手勢(shì)開(kāi)始的位置的距離。這兩個(gè)還是非常有用的。。至少我這么認(rèn)為（因?yàn)槭潜緦殞毾氲膥~）。有了這些主要思路，接下來(lái)你就給他們封裝性下，實(shí)現(xiàn)個(gè)小插件就可以了啊，上面右地址，你可以直接看，readme感覺(jué)基本上也都血比較清楚(感覺(jué)有點(diǎn)亂~~~)，請(qǐng)務(wù)必提意見(jiàn)以及發(fā)現(xiàn)的問(wèn)題啊，大家一起學(xué)習(xí)。我呢，用自己的輪子造了兩輛破車，破車1,破車2(絕對(duì)正經(jīng)私家車)。第二個(gè)例子就是一個(gè)類似整頁(yè)上劃的東西啦。

　　對(duì)了，還實(shí)現(xiàn)了對(duì)鼠標(biāo)的支持，思路一樣啦，就是該成相應(yīng)的mouse事件就可以啦，就這些啦，希望大家一起進(jìn)步與完善，讓這個(gè)輪子更牛逼，說(shuō)不定那天能成為跑車主胎呢（好吧，可能腦子太困糊涂了）。共勉啦，歡迎提問(wèn)，以及拍磚哦

　　

轉(zhuǎn)載于:https://www.cnblogs.com/IMMC/p/7072020.html

總結(jié)

以上是生活随笔為你收集整理的实现一个javascript手势库 -- base-gesture.js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。