成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

AlloyFinger web 手勢(shì)學(xué)習(xí)

seanlook / 1746人閱讀

摘要：從長(zhǎng)按開(kāi)始學(xué)習(xí)手勢(shì)在項(xiàng)目開(kāi)發(fā)過(guò)程中遇到有虛擬鍵盤(pán)開(kāi)發(fā)的需求如下圖，其中刪除鍵需要實(shí)現(xiàn)長(zhǎng)按刪除輸入框全部?jī)?nèi)容，由此展開(kāi)今天要討論的手勢(shì)開(kāi)發(fā)內(nèi)容。所以長(zhǎng)按手勢(shì)實(shí)際上是由三者共同模擬的效果。

從 [長(zhǎng)按] 開(kāi)始學(xué)習(xí) web 手勢(shì)

在項(xiàng)目開(kāi)發(fā)過(guò)程中遇到有虛擬鍵盤(pán)開(kāi)發(fā)的需求（如下圖），其中刪除鍵需要實(shí)現(xiàn) 長(zhǎng)按 刪除輸入框全部?jī)?nèi)容，由此展開(kāi)今天要討論的 web 手勢(shì) 開(kāi)發(fā)內(nèi)容。

先放出實(shí)現(xiàn)代碼：

var $input = document.getElementById("input");
var $delBtn = document.getElementById("delBtn");
var delBtnClock = null;
$delBtn.ontouchstart = function () {
    $input.innerHTML = $input.innerHTML.slice(0, -1)
    delBtnClock = setTimeout(function () {
        $input.innerHTML = "";
    }, 500);
}
$delBtn.ontouchend = function () {
    clearTimeout(delBtnClock)；
    delBtnClock = null;
}

關(guān)鍵代碼就兩句話(huà)：

在 touchstart 事件中開(kāi)啟計(jì)時(shí)，這里是計(jì)時(shí) 500 ms 后，刪除輸入框內(nèi)容

在 touchend 事件中清除 setTimeout 計(jì)時(shí)器

如果只是點(diǎn)擊，此時(shí) touchend 距離 touchstart 肯定不到 500 ms，計(jì)時(shí)器在時(shí)間沒(méi)到前已被刪除，實(shí)現(xiàn)的效果就只是退格；如果長(zhǎng)按超過(guò) 500 ms，計(jì)時(shí)器執(zhí)行，實(shí)現(xiàn)輸入框內(nèi)容全部刪除。

所以 長(zhǎng)按 手勢(shì)實(shí)際上是由 touchstart & touchend & setTimeout 三者共同模擬的效果。

實(shí)際上，常規(guī)的 js 事件只支持 click、touchstart、touchend、touchmove、touchcancel 這五種與點(diǎn)擊相關(guān)的事件，如果想實(shí)現(xiàn)更多的諸如旋轉(zhuǎn)、放大縮小之類(lèi)的手勢(shì)的話(huà)，就需要結(jié)合上面的五種事件和其他方法來(lái)模擬實(shí)現(xiàn)了。

下面我將來(lái)介紹下傳說(shuō)中的《超級(jí)小的 web 手勢(shì)庫(kù)：AlloyFinger》

學(xué)習(xí) AlloyFinger

業(yè)內(nèi)知名的強(qiáng)大的 web 手勢(shì)庫(kù) hammer.js，總共有 3240 行代碼，壓縮版的 44.7 kb。與之相比，AlloyFinger 真的稱(chēng)得上超級(jí)小了，326 行代碼，10 倍的差距，在 “kb 必爭(zhēng)” 移動(dòng) web 應(yīng)用里，AlloyFinger 一下就引起了廣大開(kāi)發(fā)者的注意，代碼量小，功能又齊全，你還要什么單車(chē)呢。（我是不是得找人家要下廣告費(fèi)）

在 AlloyFinger 里，手勢(shì)一共有 14 種，除了常規(guī)的 4 種 touchstart，touchmove，touchend 和 touchcancel，還有 10 種由以上 4 種衍生出來(lái)的手勢(shì)如下：

multipointStart：多點(diǎn)開(kāi)始

multipointEnd：多點(diǎn)結(jié)束

tap：點(diǎn)擊，效果如 click

doubleTap：雙擊

longTap：長(zhǎng)按

singleTap：?jiǎn)螕羟闆r下 250 ms 內(nèi)沒(méi)有再次點(diǎn)擊（會(huì)同時(shí)觸發(fā) tap，tap 在前）

rotate：旋轉(zhuǎn)（同時(shí)觸發(fā) pressMove）

pinch：放大縮小

pressMove：?jiǎn)吸c(diǎn)移動(dòng)

twoFingerPressMove：多點(diǎn)移動(dòng)

swipe：掃滑，在 touchend 里觸發(fā)，與 touchmove 稍有不同

原理

multipointStart

touchstart 中，觸點(diǎn)多于 1 個(gè)時(shí)觸發(fā)

multipointEnd

touchend 中，觸點(diǎn)少于 2 個(gè)時(shí)觸發(fā)（一開(kāi)始還在想是不是 bug，實(shí)際的意思是：最后一個(gè)手指離開(kāi)時(shí)觸發(fā)）

tap

touchend 中，觸點(diǎn)沒(méi)有移動(dòng)（移動(dòng)橫縱距離小于 30 px），且沒(méi)有觸發(fā) longTap 時(shí)（距離 touchStart 時(shí)間少于 750 ms）觸發(fā)

doubleTap

touchend 中，有上一次的點(diǎn)擊記錄 & 點(diǎn)擊時(shí)間差小于 250 ms & 兩次點(diǎn)擊間沒(méi)有移動(dòng)（移動(dòng)橫縱距離小于 30 px）

longTap

touchstart 中，添加 750 ms 計(jì)時(shí)器，在這個(gè)時(shí)間段內(nèi)沒(méi)有松手（touchEnd）移動(dòng)（touchMove），則觸發(fā)

singleTap

touchend 中，單擊情況下 250 ms 內(nèi)沒(méi)有再次點(diǎn)擊

rotate

touchmove 中，觸點(diǎn)多于 1 個(gè)，并存在上一次的多點(diǎn)移動(dòng)記錄時(shí)觸發(fā)

pinch

touchmove 中，觸點(diǎn)多于 1 個(gè) & 存在上一次的移動(dòng)記錄 & 有縮放長(zhǎng)度記錄時(shí)觸發(fā)

pressMove

touchmove 中，觸點(diǎn)等于 1 個(gè)

twoFingerPressMove

touchmove 中，觸點(diǎn)多于 1 個(gè)

swipe

touchend 中，觸點(diǎn)有移動(dòng)（移動(dòng)橫縱距離大于 30 px）

生命周期

重點(diǎn)

代碼中多處使用 setTimeout(function () {}, 0);， 一方面實(shí)現(xiàn)同步轉(zhuǎn)異步，釋放線(xiàn)程，另一方面也能確保屏幕滾動(dòng)時(shí)阻止事件的觸發(fā)

滑動(dòng)時(shí)，以最大的移動(dòng)方向決定水平和豎直方向

_swipeDirection: function (x1, x2, y1, y2) {
            return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? "Left" : "Right") : (y1 - y2 > 0 ? "Up" : "Down")
        }

在閱讀源碼過(guò)程中，對(duì)關(guān)鍵代碼做了注釋?zhuān)c(diǎn)我

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

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

相關(guān)文章

  • 超小Web手勢(shì)庫(kù)AlloyFinger原理

    摘要：目前作為騰訊手機(jī)手勢(shì)解決方案，在各大項(xiàng)目中都發(fā)揮著作用。因此也入選了騰訊平臺(tái)的精品組件除了國(guó)內(nèi)外的項(xiàng)目團(tuán)隊(duì)都在使用，國(guó)內(nèi)外的各大網(wǎng)站也進(jìn)行了轉(zhuǎn)載報(bào)道，作為超級(jí)小的手勢(shì)庫(kù)，騰訊的項(xiàng)目為什么不選擇而選擇下面從各個(gè)角度架構(gòu)原理上進(jìn)行一下分析。 目前AlloyFinger作為騰訊手機(jī)QQ web手勢(shì)解決方案，在各大項(xiàng)目中都發(fā)揮著作用。感興趣的同學(xué)可以去Github看看： https://git...

    Karuru 評(píng)論0 收藏0

  • 超級(jí)小的web手勢(shì)庫(kù)AlloyFinger發(fā)布

    摘要：擁有兩個(gè)版本，無(wú)依賴(lài)的獨(dú)立版和版本。除了對(duì)象，也可監(jiān)聽(tīng)內(nèi)元素的手勢(shì)需要引擎內(nèi)置對(duì)象支持綁定相關(guān)事件。據(jù)不完全統(tǒng)計(jì)，目前服務(wù)于興趣部落群動(dòng)漫騰訊學(xué)院騰訊等多個(gè)部門(mén)團(tuán)隊(duì)和項(xiàng)目。也可以在事件回調(diào)里根據(jù)攜帶的信息使用去操作。 簡(jiǎn)介 針對(duì)多點(diǎn)觸控設(shè)備編程的Web手勢(shì)組件，快速幫助你的web程序增加手勢(shì)支持，也不用再擔(dān)心click 300ms的延遲了。擁有兩個(gè)版本，無(wú)依賴(lài)的獨(dú)立版和react版本。...

    ymyang 評(píng)論0 收藏0

  • 基礎(chǔ)觸屏手勢(shì)學(xué)習(xí)

    摘要：最近接到一個(gè)小的項(xiàng)目，需要實(shí)現(xiàn)觸屏滑動(dòng)，圖片縮放旋轉(zhuǎn)移動(dòng)，故而花了三天時(shí)間學(xué)習(xí)并實(shí)現(xiàn)了一下，在此記錄一下學(xué)習(xí)過(guò)程關(guān)鍵就是觸屏手勢(shì)用到的技術(shù)過(guò)渡轉(zhuǎn)換我就不說(shuō)了，與是屬于輕量級(jí)的觸屏手勢(shì)封裝庫(kù)，其中水平移動(dòng)用的是別的功能用的是。 最近接到一個(gè)小的項(xiàng)目，需要實(shí)現(xiàn)觸屏滑動(dòng)，圖片縮放旋轉(zhuǎn)移動(dòng)，故而花了三天時(shí)間學(xué)習(xí)并實(shí)現(xiàn)了一下，在此記錄一下學(xué)習(xí)過(guò)程：關(guān)鍵就是css、 觸屏手勢(shì)用到的技術(shù)：css過(guò)...

    leo108 評(píng)論0 收藏0

  • 基礎(chǔ)觸屏手勢(shì)學(xué)習(xí)

    摘要：最近接到一個(gè)小的項(xiàng)目，需要實(shí)現(xiàn)觸屏滑動(dòng)，圖片縮放旋轉(zhuǎn)移動(dòng)，故而花了三天時(shí)間學(xué)習(xí)并實(shí)現(xiàn)了一下，在此記錄一下學(xué)習(xí)過(guò)程關(guān)鍵就是觸屏手勢(shì)用到的技術(shù)過(guò)渡轉(zhuǎn)換我就不說(shuō)了，與是屬于輕量級(jí)的觸屏手勢(shì)封裝庫(kù)，其中水平移動(dòng)用的是別的功能用的是。 最近接到一個(gè)小的項(xiàng)目，需要實(shí)現(xiàn)觸屏滑動(dòng)，圖片縮放旋轉(zhuǎn)移動(dòng)，故而花了三天時(shí)間學(xué)習(xí)并實(shí)現(xiàn)了一下，在此記錄一下學(xué)習(xí)過(guò)程：關(guān)鍵就是css、 觸屏手勢(shì)用到的技術(shù)：css過(guò)...

    leanxi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

seanlook

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<